Interactive Graphics w/ Javascript, HTML5 and CSS3

Aug 1, 2011Download as key, pdf

0 likes973 views

Blazing Cloud Interactive Graphics w/ Javascript, HTML5 and CSS3 Taught by Lee Lundrigan and Sarah Allen http://blazingcloud.net

Interactive Graphics
w/ Javascript,
HTML5 and CSS3
Lee Lundrigan
Sarah Allen

Class Materials

• You will want to get:
• https://github.com/blazingcloud/
simple_animation

• git@github.com:blazingcloud/
simple_animation.git

Who are we?

• Blazing Cloud, Inc.
• Product Development Consultancy
• Training
• Lean Startup, Customer Development
• Languages: HTML, CSS, Javascript,
Ruby, Objective-C, Java

Who are we?
• Lee Lundrigan
• iOS, Mac and Mobile Web specialist
• Wrote a cross mobile browser CSS
framework that ran on iPhone,
Android, Blackberry and WinMo

• Sarah Allen
• 20 years of Product Experience
• After Effects, Shockwave, Flash
video, Open Laszlo, Lean Startup

Tools of the trade
• Oxygen XML Editor
• http://www.oxygenxml.com
• Aptana
• http://www.aptana.com
• TextEdit (on Mac)
• TextPad (on Windows)

Course Topics
• Animation
• 2D and 3D / HTML5 Canvas
• Collision detection
• Sprites
• Sound
• Interaction
• Best practices

Vocab

vec·tor /ˈvektər/
Noun: A quantity having direction as
well as magnitude, esp. as determining
the position of one point in space
relative to another.

10
15

hertz (Hz)
a unit of frequency of one cycle per
second. Ex. 60Hz = 60 times per second

’tween/twēn/
Contraction: time between. The process
of creating in between frames.

Coordinate System

• Cartesian Coordinate System
• Starts in upper left
• Origin is (0,0)
0
0

Animation

• setInterval(code,millisec);
• repeats until cleared
• setTimeout(code, millisec);
• Fires the event once
• Note: There are 1000 milliseconds in
one second.

Animation Cont...

function draw() {
ball.x += 10;
}

Collision Detection

• Bounding box
• Test using object’s center
• {x: 10, y: 10}

Sound

• HTML5 <embed> Tag
<embed src="pong.mp3" id=”pong
”width=”0” height=”0”
autostart=”false”/>
• Get the object by id
• Call the Play() method

Keyboard Movement
• document.onkeydown
• detect character code
• left: 37 right: 39
• set moving true
• document.onkeyup
• set moving false

Keyboard Movement
Cont...

• Webkit based browsers have a bug
• the keypress event doesn’t work for
the arrow keys

This document provides an overview of interactive graphics using Javascript, HTML5 and CSS3. It introduces the speaker and covers topics like animation, interaction, sound, keyboard movement and collision detection. Code snippets and examples are provided to demonstrate concepts like animation using setInterval, coordinate systems, and playing sound. Labs are also outlined to build simple animations and games.

Iagc2Lee Lundrigan

Practical HTML5: Using It TodayDoris Chen

Everyone wants to jump into HTML5 but how do you use the cool features of this new specification while ensuring existing and future browsers render your web pages as expected? This is where feature detection, Modernizr, polyfills and shims come in. In the session, you’ll learn the best practices and strategy to code with HTML5 and CSS3 features that won’t break for the existing and future browsers. You’ll learn step by step how to use specially crafted JavaScript and CSS code that emulate HTML5 features. Also, a real-life case study will be used to demonstrate step by step how to build Cross-Browser Plug-in-Free experiences. With a couple of simple changes to your sites, you can take advantage of HTML5 today without breaking your sites in the future. Expect a lot of demos and code in the session.

HTML5 GraphicsMurillo Grubler

This document discusses HTML5 graphics capabilities including the canvas element, paths, text, images, and gradients that can be used with canvas. It also covers Scalable Vector Graphics (SVG), an XML-based vector image format that has been improved in HTML5 with support for interactivity and animation. The document provides examples of how to embed SVG in HTML5 and examples of SVG elements like circle, rect, line, ellipse, polygon, and polyline.

Web Development with HTML5, CSS3 & JavaScriptEdureka!

With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.

Animation programmingStanley Fok

The document discusses various concepts and techniques related to animation, including: - The attributes that can be animated like position, velocity, acceleration, size, rotation, color, etc. - Animation techniques like easing, bouncing, springing, and using vectors. - How to create animations by changing an object's properties over time through triggers like mouse/keyboard input. - Key concepts in animation like velocity, acceleration, friction, boundaries, and collision detection. - How to implement different animation effects like bouncing, wrapping, easing, and springing.

Back To The Future.Key 2gueste8cc560

This document discusses lessons that can be learned from the history of web development. It covers the importance of tools, the need for debugging proficiency, understanding abstractions, attention to pixel-level details, inspiration from problems, and appreciation for elegant code. Specific examples highlight issues with closures, libraries, debugging network performance, drag and drop interactions, and classic examples of beautiful code from early computers and Macintosh. The goal is to remind developers to thoroughly understand the foundations of the web platform.

HTML5 - Chances and Pitfalls (Bytro Labs GmbH)Felix Faber

HTML5 Animation in Mobile Web Gameslivedoor

Animation involves rapidly displaying a sequence of images to create the illusion of movement. When developing mobile web games or animations, developers must consider resource management, object representation, animation techniques, and event processing to optimize performance. Hardware acceleration is also important, as it improves the performance of canvas and CSS3D transformations on mobile devices. The Collie library is designed to help with high performance animation across devices by supporting optimized rendering methods and detailed region detection of objects.

Intro to HTML5Jussi Pohjolainen

This document provides a short introduction to HTML5, including: - HTML5 is the 5th version of the HTML standard by the W3C and is still under development but supported by many browsers. - HTML5 introduces new semantic elements, video and audio tags, 2D/3D graphics using <canvas>, and new JavaScript APIs for features like geolocation, offline web apps, and drag and drop. - The document provides examples of using new HTML5 features like video playback, semantic elements, geolocation API, and drawing on a canvas with JavaScript.

HTML5 for Rich User ExperienceMahbubur Rahman

Canvas and WebGL allow for rich graphics and animation on the web through APIs for 2D and 3D drawing. Forms have been enhanced with new input types like email, number and date pickers. Features like drag and drop, geolocation, notifications and the history API enable more interactive experiences. Browser capabilities have been extended through APIs for multimedia, storage, web sockets and accessing hardware. HTML5 aims to provide these features to enhance user experience without additional plugins.

Html5Ahmed Jadalla

The document discusses HTML5 as a platform for user interfaces. It outlines several new features of HTML5, including the <canvas> element for drawing, WebGL for 3D graphics, multi-touch support, local storage with Web SQL databases, real-time updates with Web Sockets, improved file handling, and offline application caching. The document argues that HTML5 provides many of the capabilities of native applications and recommends using HTML5 and JavaScript for cross-platform user interface development.

Back To The FutureBill Scott

Intro to HTML5 Game ProgrammingJames Williams

The document provides an introduction and agenda for a talk on HTML5 game programming. The talk will cover HTML5 basics like application cache, web workers, web sockets, and storage technologies. It will then dive into Canvas 2D drawing, including shapes, paths, fonts, images, and pixel manipulation. The speaker will demonstrate creating a tic-tac-toe game with Canvas, including drawing the board, X's, and O's. The talk will also cover using the Canvas to work with video.

HTML5Maurice De Beijer [MVP]

Web AppsTim Wray

HTML5: where flash isn't needed anymoreRemy Sharp

Javascript Animation with Canvas - Gregory Starr 2015Gregory Starr

Google tools for webmastersRujata Patil

Google Webmaster Tool shows traffic for each keyword separately, it gives more information about website performance according to Google search query. This tool does not cover search query result from others search engines, such as Bing, Yahoo, or Baidu. Google Analytics shows total traffic of a website such as clicks to your site regardless of where they came from and what search terms were used. It shows whatever search terms brought up your site in the listings. While your keywords might be there too, many will probably be specific terms or long-tail search terms. There are probably even search terms where Google offered your site even though they don't see a perfect match. If Google thinks the searcher meant something else, maybe they displayed your site for that word or term as a suitable match even though that word is not listed in Webmaster Tools as even being on your site.

HTML5: An OverviewNagendra Um

[arra]stre Tech TalkGenevieve Smith-Nunes

Bringing HTML5 alive in SharePointChad Schroeder

Best Practices for Webcam Augmented RealityZugara

ART169_tut_flashMárcio Antônio Moraes Reyes

This document provides a tutorial for creating organic 3D ribbon effects in Flash CS3 or later using ActionScript 3.0. It explains how to generate stunning, colorful ribbon patterns that react to user interaction. The tutorial walks through setting up variables and classes to define ribbon particles and their properties. Methods are described for moving the particles to create flowing ribbons, calculating virtual points around each particle, and drawing ribbon segments between points. Adjusting various parameters allows generating different ribbon effects that could be used for visualizations or animations. The full source code is provided to experiment with and modify to create custom ribbon animations.

Developing Interactive 3D Experiences in HTML5 with Carlos UlloaFITC

Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca OVERVIEW Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa Modern web browsers are capable of producing some amazing audiovisual candy, through new capabilities like HTML5, fast JavaScript, WebGL and Web Audio API. In this session, Carlos talks in detail about his work developing interactive 3D experiences using these technologies. He will take an in-depth look at the production of high-end WebGL projects including Lights, HelloRun and Racer-S, to discuss the graphics, audio and input development techniques used. He shows how to take advantage of the three.js engine to deliver immersive 3D visuals running at high performance on desktop and mobile browsers. This presentation will also cover music visualization and sound effects, using Web Audio API for sound processing and analysis. Carlos also discusses the integration of a broad range of input technologies like touch, mouse, keyboard, accelerometer and Leap Motion controller, along with some interesting lessons learned.

W3C HTML5 KIG-The complete guide to building html5 gamesChanghwan Yi

The document discusses building HTML5 games and provides resources on graphics libraries, physics engines, handling touch input, and gaming frameworks. It recommends libraries like EaselJS and frameworks like MelonJS and ImpactJS for HTML5 game development. Tutorials are presented on porting games to HTML5 using these tools as well as considerations for building games targeting multiple platforms like Windows 8.

Rockstar Graphics with HTML5Dave Balmer

Improving Game Performance in the BrowserFITC

Improving Game Performance in the Browser with Mickey MacDonald Presented on September 17 2014 at FITC's Web Unleashed 2014 event in Toronto Poor performance is the easiest way to wreck the experience of any game; with web-based games, performance is even more crucial. In this talk, Mickey will discuss the various ways that we can optimize web-based games. He will look at the how the use of WebWorkers can increase performance, as well as tricks to improve load times and audio performance. So join Mickey and learn how to optimize your game to be lightning fast in every browser. OBJECTIVE Demonstrate techniques for increasing game performance in browsers TARGET AUDIENCE Web-based game developers ASSUMED AUDIENCE KNOWLEDGE Basic web-based game development skills FIVE THINGS AUDIENCE MEMBERS WILL LEARN Using WebWorkers to increase performance How to speed up load times Audio performance techniques Best practices for graphics compression Pooling techniques

Rails ORM De-mystifying Active Record has_manyBlazing Cloud

Rails' ORM layer, ActiveRecord, is an elegant solution for keeping model code simple and modular (aka DRY). Demystifying the way Ruby-on-Rails uses runtime method generation opens a doorway for understanding and provides a foundation for the other ways Rails uses simple conventions to allow sophisticated, concise functionality in a declarative style. Here is big mystery that you'll be equipped to understand better after playing with the slides -> If honeys is an array - and honeys has a method create! - then why does an array object [] not have create! Hive.first.honeys.class => Array [].create! => NoMethodError Hive.first.honeys.create!

Active Record Introduction - 3Blazing Cloud

More Related Content

Similar to Interactive Graphics w/ Javascript, HTML5 and CSS3 (20)

HTML5 Animation in Mobile Web Gameslivedoor

Intro to HTML5Jussi Pohjolainen

HTML5 for Rich User ExperienceMahbubur Rahman

Html5Ahmed Jadalla

Back To The FutureBill Scott

Intro to HTML5 Game ProgrammingJames Williams

HTML5Maurice De Beijer [MVP]

Web AppsTim Wray

HTML5: where flash isn't needed anymoreRemy Sharp

Javascript Animation with Canvas - Gregory Starr 2015Gregory Starr

Google tools for webmastersRujata Patil

HTML5: An OverviewNagendra Um

[arra]stre Tech TalkGenevieve Smith-Nunes

Bringing HTML5 alive in SharePointChad Schroeder

Best Practices for Webcam Augmented RealityZugara

ART169_tut_flashMárcio Antônio Moraes Reyes

Developing Interactive 3D Experiences in HTML5 with Carlos UlloaFITC

W3C HTML5 KIG-The complete guide to building html5 gamesChanghwan Yi

Rockstar Graphics with HTML5Dave Balmer

Improving Game Performance in the BrowserFITC

HTML5 Animation in Mobile Web Gameslivedoor

Intro to HTML5Jussi Pohjolainen

HTML5 for Rich User ExperienceMahbubur Rahman

Html5Ahmed Jadalla

Back To The FutureBill Scott

Intro to HTML5 Game ProgrammingJames Williams

HTML5Maurice De Beijer [MVP]

Web AppsTim Wray

HTML5: where flash isn't needed anymoreRemy Sharp

Javascript Animation with Canvas - Gregory Starr 2015Gregory Starr

Google tools for webmastersRujata Patil

HTML5: An OverviewNagendra Um

[arra]stre Tech TalkGenevieve Smith-Nunes

Bringing HTML5 alive in SharePointChad Schroeder

Best Practices for Webcam Augmented RealityZugara

ART169_tut_flashMárcio Antônio Moraes Reyes

Developing Interactive 3D Experiences in HTML5 with Carlos UlloaFITC

W3C HTML5 KIG-The complete guide to building html5 gamesChanghwan Yi

Rockstar Graphics with HTML5Dave Balmer

Improving Game Performance in the BrowserFITC

More from Blazing Cloud (20)

Rails ORM De-mystifying Active Record has_manyBlazing Cloud

Active Record Introduction - 3Blazing Cloud

Rails Class Intro - 1 Blazing Cloud

Your first rails app - 2Blazing Cloud

The document provides an overview of creating and running a basic Rails application. It discusses generating a new Rails app called "roster" and the directory structure it creates. It describes the development, test, and production environments in Rails and additional configuration files. It also introduces the model-view-controller (MVC) pattern used in Rails applications and using scaffolds to quickly generate models, views, and controllers.

RSpec Quick ReferenceBlazing Cloud

Rspec Cheat Sheet describes how to write tests using RSpec: - Describe blocks define test contexts for classes, examples are marked with "it", and before blocks run code before each example. - Object.should and object.should_not compare actual and expected values, with matchers like equal, be_close, be, be_predicate, be_an_instance_of, respond_to, raise_error, include. - Additional matchers check for counts like have and have_errors_on, or that a block changes an attribute count.

Extending railsBlazing Cloud

2day Ruby Class IntroBlazing Cloud

Mobile Lean UXBlazing Cloud

The document discusses mobile user experience (UX) and provides information on mobile phone subscriptions, platforms, programming languages, frameworks, and strategies for developing mobile apps. It notes that 4.6 billion mobile phone subscriptions account for 69% of the world's population and that revenue comes primarily from native apps on platforms like Symbian, RIM, Apple, Windows, Google, and Palm which use languages like C++, Java, Objective C, C#, and JavaScript. It also discusses approaches like mobile web, native apps, and cross-platform frameworks.

Interactive GraphicsBlazing Cloud

Form helpersBlazing Cloud

This document discusses form helpers in Rails 3. It shows how to use form_for to generate forms for a Person model, including labels, text fields, and a submit button. form_for allows the same syntax for new and edit forms by setting the URL based on if the object is new or existing. Common form elements like text fields, text areas, checkboxes and selects can be generated. When not associated with a model, form_tag and related tag helpers can be used instead.

Intro to Ruby (and RSpec)Blazing Cloud

Ruby was created by Yukihiro "Matz" Matsumoto with a focus on programmer productivity and usability. It is a dynamically typed, interpreted programming language that was first released in 1996. Ruby supports object-oriented programming and features like blocks, lambdas, and regular expressions. Popular implementations of the Ruby virtual machine include MRI, YARV, JRuby, Rubinius, IronRuby, and MacRuby. RSpec is a testing framework for Ruby that uses describe and it blocks to specify expectations for code examples to verify.

What you don't know (yet)Blazing Cloud

The document discusses key topics in Ruby on Rails development including development techniques, optimization strategies, and deployment options. It outlines Javascript integration, view helpers, and association types for development. For testing, it mentions integration testing, using fakes and mocks, and setting up test data through fixtures or factories. Optimization topics cover query optimization and caching. Deployment can utilize Capistrano, Apache/Passenger, or deploying a JRuby application as a WAR file.

Introduction to RailsBlazing Cloud

ActiveRecordBlazing Cloud

The document discusses ActiveRecord in Rails for interacting with database tables. It explains that every model class corresponds to a database table, and Rails generates migrations that create the tables. It demonstrates using the Rails console to find and load records from a table. Dynamic getter and setter methods allow accessing column values. ActiveRecord handles saving, updating, and querying records while protecting against SQL injection attacks.

Ruby on Rails Class introBlazing Cloud

This document provides an introduction to the Ruby on Rails web framework. It will cover the Ruby programming language syntax and fundamentals used in Rails, the core Rails classes and common patterns. Students will learn through exploration, test-driven development, and live coding demonstrations. The class will provide a conceptual overview and in-class coding. Ruby on Rails was created in 2004 by extracting functionality from Basecamp and was first released as open source software, with an emphasis on conventions, minimal code, and test-driven development.

Ruby on rails toolboxBlazing Cloud

This document provides an overview of the core dependencies and additional tools needed for Ruby on Rails development. The core dependencies include Ruby, Ruby Gems, and Rails, which is distributed as a Ruby gem. Additional recommended tools include a database like SQLite, a terminal or IDE for command line access, Git for source control, the Rake gem for tasks, test frameworks like RSpec, and Heroku for deployment. Setting up these dependencies and tools provides the basic toolbox for developing Ruby on Rails applications.

Routes ControllersBlazing Cloud

The document discusses routes and controllers in Rails. It provides an overview of REST, including that it supports stateless communication and a uniform interface. It describes Rails REST helpers that allow defining resources and generating RESTful routes. It then outlines the default REST actions including index, show, new, create, edit, update, and delete along with the corresponding HTTP methods and sample URLs.

Test Driven DevelopmentBlazing Cloud

Test-driven development (TDD) is a software development process that relies on the repetition of short development cycles called "red-green-refactor" to increase software quality. TDD makes use of unit testing frameworks like Test::Unit, Shoulda, and Rspec to first design and write tests for desired functionality before implementing the actual code. Integration testing frameworks like Cucumber, Webrat, Selenium, and Watir are also commonly used in TDD to test full functionality across integrated systems. Outside-in testing is a TDD technique where tests are written from the user perspective using tools like Cucumber before implementing internal code.

Active RecordBlazing Cloud

This document discusses ActiveRecord in Rails. It shows how to log SQL statements, find the first record of a model, dynamically add getter and setter methods, save records to the database, and perform safe queries to prevent SQL injection. Specifically, it logs SQL, finds the first person record, sets dynamic attributes on a person object, discusses saving records and queries, and demonstrates safe querying compared to unsafe querying.

EnumerablesBlazing Cloud

The document discusses the Enumerable module in Ruby, which provides collection-oriented methods like each, map, grep, find, all?, any?, and inject. It explains that classes like Array, Hash, and a custom MyCollection class can mix in Enumerable to gain these collection methods. It provides examples of using Enumerable methods on a vehicles array to select, transform, and iterate over elements in complex ways.

Rails ORM De-mystifying Active Record has_manyBlazing Cloud

Active Record Introduction - 3Blazing Cloud

Rails Class Intro - 1 Blazing Cloud

Your first rails app - 2Blazing Cloud

RSpec Quick ReferenceBlazing Cloud

Extending railsBlazing Cloud

2day Ruby Class IntroBlazing Cloud

Mobile Lean UXBlazing Cloud

Interactive GraphicsBlazing Cloud

Form helpersBlazing Cloud

Intro to Ruby (and RSpec)Blazing Cloud

What you don't know (yet)Blazing Cloud

Introduction to RailsBlazing Cloud

ActiveRecordBlazing Cloud

Ruby on Rails Class introBlazing Cloud

Ruby on rails toolboxBlazing Cloud

Routes ControllersBlazing Cloud

Test Driven DevelopmentBlazing Cloud

Active RecordBlazing Cloud

EnumerablesBlazing Cloud

Recently uploaded (20)

Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025Nikki Chapple

Session | Protecting Your Sensitive Data with Microsoft Purview: Practical Information Protection and DLP Strategies Presenter | Nikki Chapple (MVP| Principal Cloud Architect CloudWay) & Ryan John Murphy (Microsoft) Event | IRMS Conference 2025 Format | Birmingham UK Date | 18-20 May 2025 In this closing keynote session from the IRMS Conference 2025, Nikki Chapple and Ryan John Murphy deliver a compelling and practical guide to data protection, compliance, and information governance using Microsoft Purview. As organizations generate over 2 billion pieces of content daily in Microsoft 365, the need for robust data classification, sensitivity labeling, and Data Loss Prevention (DLP) has never been more urgent. This session addresses the growing challenge of managing unstructured data, with 73% of sensitive content remaining undiscovered and unclassified. Using a mountaineering metaphor, the speakers introduce the “Secure by Default” blueprint—a four-phase maturity model designed to help organizations scale their data security journey with confidence, clarity, and control. 🔐 Key Topics and Microsoft 365 Security Features Covered: Microsoft Purview Information Protection and DLP Sensitivity labels, auto-labeling, and adaptive protection Data discovery, classification, and content labeling DLP for both labeled and unlabeled content SharePoint Advanced Management for workspace governance Microsoft 365 compliance center best practices Real-world case study: reducing 42 sensitivity labels to 4 parent labels Empowering users through training, change management, and adoption strategies 🧭 The Secure by Default Path – Microsoft Purview Maturity Model: Foundational – Apply default sensitivity labels at content creation; train users to manage exceptions; implement DLP for labeled content. Managed – Focus on crown jewel data; use client-side auto-labeling; apply DLP to unlabeled content; enable adaptive protection. Optimized – Auto-label historical content; simulate and test policies; use advanced classifiers to identify sensitive data at scale. Strategic – Conduct operational reviews; identify new labeling scenarios; implement workspace governance using SharePoint Advanced Management. 🎒 Top Takeaways for Information Management Professionals: Start secure. Stay protected. Expand with purpose. Simplify your sensitivity label taxonomy for better adoption. Train your users—they are your first line of defense. Don’t wait for perfection—start small and iterate fast. Align your data protection strategy with business goals and regulatory requirements. 💡 Who Should Watch This Presentation? This session is ideal for compliance officers, IT administrators, records managers, data protection officers (DPOs), security architects, and Microsoft 365 governance leads. Whether you're in the public sector, financial services, healthcare, or education. 🔗 Read the blog: https://nikkichapple.com/irms-conference-2025/

End-to-end Assurance for SD-WAN & SASE with ThousandEyesThousandEyes

TrustArc Webinar: Mastering Privacy ContractingTrustArc

As data privacy regulations become more pervasive across the globe and organizations increasingly handle and transfer (including across borders) meaningful volumes of personal and confidential information, the need for robust contracts to be in place is more important than ever. This webinar will provide a deep dive into privacy contracting, covering essential terms and concepts, negotiation strategies, and key practices for managing data privacy risks. Whether you're in legal, privacy, security, compliance, GRC, procurement, or otherwise, this session will include actionable insights and practical strategies to help you enhance your agreements, reduce risk, and enable your business to move fast while protecting itself. This webinar will review key aspects and considerations in privacy contracting, including: - Data processing addenda, cross-border transfer terms including EU Model Clauses/Standard Contractual Clauses, etc. - Certain legally-required provisions (as well as how to ensure compliance with those provisions) - Negotiation tactics and common issues - Recent lessons from recent regulatory actions and disputes

Securiport - A Border Security CompanySecuriport

Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Lorenzo Miniero

Slides for my "Multistream support in the Janus SIP and NoSIP plugins" presentation at the OpenSIPS Summit 2025 event. They describe my efforts refactoring the Janus SIP and NoSIP plugins to allow for the gatewaying of an arbitrary number of audio/video streams per call (thus breaking the current 1-audio/1-video limitation), plus some additional considerations on what this could mean when dealing with application protocols negotiated via SIP as well.

Supercharge Your AI Development with Local LLMsFrancesco Corti

In today's AI development landscape, developers face significant challenges when building applications that leverage powerful large language models (LLMs) through SaaS platforms like ChatGPT, Gemini, and others. While these services offer impressive capabilities, they come with substantial costs that can quickly escalate especially during the development lifecycle. Additionally, the inherent latency of web-based APIs creates frustrating bottlenecks during the critical testing and iteration phases of development, slowing down innovation and frustrating developers. This talk will introduce the transformative approach of integrating local LLMs directly into their development environments. By bringing these models closer to where the code lives, developers can dramatically accelerate development lifecycles while maintaining complete control over model selection and configuration. This methodology effectively reduces costs to zero by eliminating dependency on pay-per-use SaaS services, while opening new possibilities for comprehensive integration testing, rapid prototyping, and specialized use cases.

Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr. Jimmy Schwarzkopf

Introduction and Background: Study Overview and Methodology: The study analyzes the IT market in Israel, covering over 160 markets and 760 companies/products/services. It includes vendor rankings, IT budgets, and trends from 2025-2029. Vendors participate in detailed briefings and surveys. Vendor Listings: The presentation lists numerous vendors across various pages, detailing their names and services. These vendors are ranked based on their participation and market presence. Market Insights and Trends: Key insights include IT market forecasts, economic factors affecting IT budgets, and the impact of AI on enterprise IT. The study highlights the importance of AI integration and the concept of creative destruction. Agentic AI and Future Predictions: Agentic AI is expected to transform human-agent collaboration, with AI systems understanding context and orchestrating complex processes. Future predictions include AI's role in shopping and enterprise IT.

Cognitive Chasms - A Typology of GenAI Failure Failure ModesDr. Tathagat Varma

SDG 9000 Series: Unleashing multigigabit everywhereAdtran

Offshore IT Support: Balancing In-House and Offshore Help Desk Techniciansjohn823664

In today's always-on digital environment, businesses must deliver seamless IT support across time zones, devices, and departments. This SlideShare explores how companies can strategically combine in-house expertise with offshore talent to build a high-performing, cost-efficient help desk operation. From the benefits and challenges of offshore support to practical models for integrating global teams, this presentation offers insights, real-world examples, and key metrics for success. Whether you're scaling a startup or optimizing enterprise support, discover how to balance cost, quality, and responsiveness with a hybrid IT support strategy. Perfect for IT managers, operations leads, and business owners considering global help desk solutions.

Microsoft Build 2025 takeaways in one presentationDigitalmara

Microsoft Build 2025 introduced significant updates. Everything revolves around AI. DigitalMara analyzed these announcements: • AI enhancements for Windows 11 By embedding AI capabilities directly into the OS, Microsoft is lowering the barrier for users to benefit from intelligent automation without requiring third-party tools. It's a practical step toward improving user experience, such as streamlining workflows and enhancing productivity. However, attention should be paid to data privacy, user control, and transparency of AI behavior. The implementation policy should be clear and ethical. • GitHub Copilot coding agent The introduction of coding agents is a meaningful step in everyday AI assistance. However, it still brings challenges. Some people compare agents with junior developers. They noted that while the agent can handle certain tasks, it often requires supervision and can introduce new issues. This innovation holds both potential and limitations. Balancing automation with human oversight is crucial to ensure quality and reliability. • Introduction of Natural Language Web NLWeb is a significant step toward a more natural and intuitive web experience. It can help users access content more easily and reduce reliance on traditional navigation. The open-source foundation provides developers with the flexibility to implement AI-driven interactions without rebuilding their existing platforms. NLWeb is a promising level of web interaction that complements, rather than replaces, well-designed UI. • Introduction of Model Context Protocol MCP provides a standardized method for connecting AI models with diverse tools and data sources. This approach simplifies the development of AI-driven applications, enhancing efficiency and scalability. Its open-source nature encourages broader adoption and collaboration within the developer community. Nevertheless, MCP can face challenges in compatibility across vendors and security in context sharing. Clear guidelines are crucial. • Windows Subsystem for Linux is open-sourced It's a positive step toward greater transparency and collaboration in the developer ecosystem. The community can now contribute to its evolution, helping identify issues and expand functionality faster. However, open-source software in a core system also introduces concerns around security, code quality management, and long-term maintenance. Microsoft’s continued involvement will be key to ensuring WSL remains stable and secure. • Azure AI Foundry platform hosts Grok 3 AI models Adding new models is a valuable expansion of AI development resources available at Azure. This provides developers with more flexibility in choosing language models that suit a range of application sizes and needs. Hosting on Azure makes access and integration easier when using Microsoft infrastructure.

Gihbli AI and Geo sitution |use/misuse of Ai Technologyzainkhurram1111

Cyber Security Legal Framework in Nepal.pptxGhimire B.R.

Grannie’s Journey to Using Healthcare AI ExperiencesLauren Parr

Kubernetes Cloud Native Indonesia Meetup - May 2025Prasta Maha

Cyber security cyber security cyber security cyber security cyber security cy...pranavbodhak

Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...Aaryan Kansari

Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generative AI Discover Agentic AI, the revolutionary step beyond reactive generative AI. Learn how these autonomous systems can reason, plan, execute, and adapt to achieve human-defined goals, acting as digital co-workers. Explore its promise, key frameworks like LangChain and AutoGen, and the challenges in designing reliable and safe AI agents for future workflows. Sticky Note Bullets: Definition: Next stage beyond ChatGPT-like systems, offering true autonomy. Core Function: Can "reason, plan, execute and adapt" independently. Distinction: Proactive (sets own actions for goals) vs. Reactive (responds to prompts). Promise: Acts as "digital co-workers," handling grunt work like research, drafting, bug fixing. Industry Outlook: Seen as a game-changer; Deloitte predicts 50% of companies using GenAI will have agentic AI pilots by 2027. Key Frameworks: LangChain, Microsoft's AutoGen, LangGraph, CrewAI. Development Focus: Learning to think in workflows and goals, not just model outputs. Challenges: Ensuring reliability, safety; agents can still hallucinate or go astray. Best Practices: Start small, iterate, add memory, keep humans in the loop for final decisions. Use Cases: Limited only by imagination (e.g., drafting business plans, complex simulations).

Let’s Get Slack Certified! 🚀- Slack CommunitySanjeetMishra29

European Accessibility Act & Integrated Accessibility TestingJulia Undeutsch

Emma Dawson will guide you through two important topics in this session. Firstly, she will prepare you for the European Accessibility Act (EAA), which comes into effect on 28 June 2025, and show you how development teams can prepare for it. In the second part of the webinar, Emma Dawson will explore with you various integrated testing methods and tools that will help you improve accessibility during the development cycle, such as Linters, Storybook, Playwright, just to name a few. Focus: European Accessibility Act, Integrated Testing tools and methods (e.g. Linters, Storybook, Playwright) Target audience: Everyone, Developers, Testers

Co-Constructing Explanations for AI Systems using ProvenancePaul Groth

Explanation is not a one off - it's a process where people and systems work together to gain understanding. This idea of co-constructing explanations or explanation by exploration is powerful way to frame the problem of explanation. In this talk, I discuss our first experiments with this approach for explaining complex AI systems by using provenance. Importantly, I discuss the difficulty of evaluation and discuss some of our first approaches to evaluating these systems at scale. Finally, I touch on the importance of explanation to the comprehensive evaluation of AI systems.

Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025Nikki Chapple

End-to-end Assurance for SD-WAN & SASE with ThousandEyesThousandEyes

TrustArc Webinar: Mastering Privacy ContractingTrustArc

Securiport - A Border Security CompanySecuriport

Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Lorenzo Miniero

Supercharge Your AI Development with Local LLMsFrancesco Corti

Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr. Jimmy Schwarzkopf

Cognitive Chasms - A Typology of GenAI Failure Failure ModesDr. Tathagat Varma

SDG 9000 Series: Unleashing multigigabit everywhereAdtran

Offshore IT Support: Balancing In-House and Offshore Help Desk Techniciansjohn823664

Microsoft Build 2025 takeaways in one presentationDigitalmara

Gihbli AI and Geo sitution |use/misuse of Ai Technologyzainkhurram1111

Cyber Security Legal Framework in Nepal.pptxGhimire B.R.

Grannie’s Journey to Using Healthcare AI ExperiencesLauren Parr

Kubernetes Cloud Native Indonesia Meetup - May 2025Prasta Maha

Cyber security cyber security cyber security cyber security cyber security cy...pranavbodhak

Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...Aaryan Kansari

Let’s Get Slack Certified! 🚀- Slack CommunitySanjeetMishra29

European Accessibility Act & Integrated Accessibility TestingJulia Undeutsch

Co-Constructing Explanations for AI Systems using ProvenancePaul Groth

Interactive Graphics w/ Javascript, HTML5 and CSS3

1. Interactive Graphics w/ Javascript, HTML5 and CSS3 Lee Lundrigan Sarah Allen

2. Class Materials • You will want to get: • https://github.com/blazingcloud/ simple_animation • git@github.com:blazingcloud/ simple_animation.git

3. Who are we? • Blazing Cloud, Inc. • Product Development Consultancy • Training • Lean Startup, Customer Development • Languages: HTML, CSS, Javascript, Ruby, Objective-C, Java

4. Who are we? • Lee Lundrigan • iOS, Mac and Mobile Web specialist • Wrote a cross mobile browser CSS framework that ran on iPhone, Android, Blackberry and WinMo • Sarah Allen • 20 years of Product Experience • After Effects, Shockwave, Flash video, Open Laszlo, Lean Startup

5. Who are YOU?

6. Tools of the trade • Oxygen XML Editor • http://www.oxygenxml.com • Aptana • http://www.aptana.com • TextEdit (on Mac) • TextPad (on Windows)

7. Course Topics • Animation • 2D and 3D / HTML5 Canvas • Collision detection • Sprites • Sound • Interaction • Best practices

8. Vocab vec·tor /ˈvektər/ Noun: A quantity having direction as well as magnitude, esp. as determining the position of one point in space relative to another. 10 15

9. hertz (Hz) a unit of frequency of one cycle per second. Ex. 60Hz = 60 times per second ’tween/twēn/ Contraction: time between. The process of creating in between frames.

10. Coordinate System • Cartesian Coordinate System • Starts in upper left • Origin is (0,0) 0 0

11. Animation • setInterval(code,millisec); • repeats until cleared • setTimeout(code, millisec); • Fires the event once • Note: There are 1000 milliseconds in one second.

12. Animation Cont... function draw() { ball.x += 10; }

13. Lab - Simple Animation

14. Collision Detection • Bounding box • Test using object’s center • {x: 10, y: 10}

15. Sound • HTML5 <embed> Tag <embed src="pong.mp3" id=”pong ”width=”0” height=”0” autostart=”false”/> • Get the object by id • Call the Play() method

16. Keyboard Movement • document.onkeydown • detect character code • left: 37 right: 39 • set moving true • document.onkeyup • set moving false

17. Keyboard Movement Cont... • Webkit based browsers have a bug • the keypress event doesn’t work for the arrow keys

18. Lab - Game time

Editor's Notes

#2: \n
#3: \n
#4: \n
#5: \n
#6: \n
#7: \n
#8: \n
#9: \n
#10: \n
#11: \n
#12: \n
#13: \n
#14: \n
#15: \n
#16: \n
#17: \n
#18: \n
#19: \n

Interactive Graphics w/ Javascript, HTML5 and CSS3

Recommended

More Related Content

Similar to Interactive Graphics w/ Javascript, HTML5 and CSS3 (20)

More from Blazing Cloud (20)

Recently uploaded (20)

Interactive Graphics w/ Javascript, HTML5 and CSS3

Editor's Notes