The document discusses using Java with HTML5 and related technologies like CSS3 and WebSockets. It provides an overview of HTML5 features like Canvas, SVG, CSS3 animations, and WebSockets. It describes how these features can be used to build interactive client-side applications and how Java servers can integrate with HTML5 apps by saving/retrieving application state and graphics from the client. Java servers can generate graphics like SVG dynamically based on data from HTML5 clients.
Evolution of a cloud start up: From C# to Node.jsSteve Jamieson
ComputeNext started 3 years ago to develop the first open marketplace for cloud computing services.
We started by using the technologies we were most familiar with - C# and SQL Server, and our initial architecture and implementation was based on these technologies.
Over time, we have progressively introduced more open source elements, including MongoDB, RabbitMQ and Node.js.
Now we are at the point where most of our back-end services rely on Node.js. The talk will talk about why we did this, how we did this, and discuss our experiences - both good and bad.
This is a presentation on Google Web Toolkit given at Devfest 2009 in Buenos Aires Argentina on Nov 17, 2009 by Google Developer Advocate, Chris Schalk
Evolution of a cloud start up: From C# to Node.jsSteve Jamieson
ComputeNext started 3 years ago to develop the first open marketplace for cloud computing services.
We started by using the technologies we were most familiar with - C# and SQL Server, and our initial architecture and implementation was based on these technologies.
Over time, we have progressively introduced more open source elements, including MongoDB, RabbitMQ and Node.js.
Now we are at the point where most of our back-end services rely on Node.js. The talk will talk about why we did this, how we did this, and discuss our experiences - both good and bad.
This is a presentation on Google Web Toolkit given at Devfest 2009 in Buenos Aires Argentina on Nov 17, 2009 by Google Developer Advocate, Chris Schalk
Slides for presentation at DrupalCon Munich August 2012
http://munich2012.drupal.org/program/sessions/backbonejs-frontend
Author: David Corbacho
http://corbacho.info
Building production websites with Node.js on the Microsoft stackCellarTracker
Node.js on Windows, in production, may not be the most common configuration – but it’s immensely powerful with the help of edge.js, iisnode, and other open source projects. In fact, it’s a great tool for building highly performant, scalable front- and back-end websites on the Microsoft stack (IIS, .NET, SQL Server, etc).
In this talk, I’ll share some details, tips-and-tricks, and experiences building a production website on Windows, using CellarTracker – the world’s largest collection of community wine reviews and tools for cellar management – as an example.
Write Powerful Javascript Modules To Make Your Apps DRY (Brian Leathem)Red Hat Developers
Large-scale Javascript applications benefit from a modular approach that let code be reused both within the application and across repeated implementations. In this session, we'll look at the modular approach used to build reusable Javascript modules in the Red Hat mobile field workforce management application (WFM) showcased in this year's Summit middleware keynote demo. Reusable modules for WFM are packaged as node package manager (npm) modules, providing a consistent format for both server and client sides using Node.js and Browserify. Modules are loosely coupled using the Mediator pattern and they broadcast user actions and state changes giving the application and other modules the opportunity to hook into those events. Additionally, visual components are packaged in a framework-agnostic manner, providing reusable UI components. You'll leave this session understanding the challenges faced when building reusable modules for large-scale applications, and the solutions employed in building out the reusable WFM modules.
Алексей Швайка "Bundling: you are doing it wrong"Fwdays
Начинаете новый проект и не знаете что же выбрать: gulp+browserify, webpack или может brunch? SVG или PNG спрайты? На сколько сабдоменов шардить ресурсы? С повсеместным приходом HTTP/2.0 лучшие практики оптимизации загрузки веб-сайтов и приложений весьма изменились, однако наши инструменты -- нет. Как же деливерить несколько раз в день и не вынуждать пользователен перескачивать весь бандл?
Я расскажу об ограничениях HTTP/1.1, почему возникли бандлеры, как внутри работает HTTP/2.0, какие проблемы он решает, что такое server push, развею пару мифов о минификации, поведаю про преимущества progressive rendering, изменениях в whatwg html5 стандарте и покажу два способа (es6 modules и commonjs без препроцессинга) организации модулей на клиенте.
Overview of The Scala Based Lift Web FrameworkIndicThreads
All of us having experience with other web frameworks such as Struts,Tapestry, Rails, etc would ask “Why another framework? Does Lift really solve problems any differently or more effectively than the ones we’ve used before? The Lift Web Framework provides an advanced set of tools for quickly and easily building real-time, multi-users, interactive web applications. Lift has a unique advantage that no other web framework currently shares: the Scala programming language. Scala is a relatively new language developed by Martin Odersky and his group at EPFL Switzerland. Scala is a hybrid Object Oriented and Functional language that runs at native speeds on the JVM and fully interoperates with Java code. Lift is a hybrid web framework built on Scala. Lift derives its features and idioms from the best of existing web frameworks as well as the functional and OO features in Scala. It compiles to Java bytecode and runs on the JVM, which means that we can leverage the vast ecosystem of Java libraries just as we would with any other java web framework. This presentation details the advantages of this Scala based Web framework over all the existing frameworks that we have used uptil now and shows a small sample application built with Lift. We will create a basic application with a model that maps to RDBMS, web pages that correspond to back end logic and bind dynamically created content to elements on the webpage.
Text Editors (Atom / Sublime)
Apache Server (sftp/ssh/php) – Todd's Server!
CPanel / Wordpress (server side details)
Working with any Web API (Mapping Example)
(facebook, linkedin, twitter, maps, d3.js, jquary)
JSON and HTML <img>
GIT http://www.github.com
Slides for presentation at DrupalCon Munich August 2012
http://munich2012.drupal.org/program/sessions/backbonejs-frontend
Author: David Corbacho
http://corbacho.info
Building production websites with Node.js on the Microsoft stackCellarTracker
Node.js on Windows, in production, may not be the most common configuration – but it’s immensely powerful with the help of edge.js, iisnode, and other open source projects. In fact, it’s a great tool for building highly performant, scalable front- and back-end websites on the Microsoft stack (IIS, .NET, SQL Server, etc).
In this talk, I’ll share some details, tips-and-tricks, and experiences building a production website on Windows, using CellarTracker – the world’s largest collection of community wine reviews and tools for cellar management – as an example.
Write Powerful Javascript Modules To Make Your Apps DRY (Brian Leathem)Red Hat Developers
Large-scale Javascript applications benefit from a modular approach that let code be reused both within the application and across repeated implementations. In this session, we'll look at the modular approach used to build reusable Javascript modules in the Red Hat mobile field workforce management application (WFM) showcased in this year's Summit middleware keynote demo. Reusable modules for WFM are packaged as node package manager (npm) modules, providing a consistent format for both server and client sides using Node.js and Browserify. Modules are loosely coupled using the Mediator pattern and they broadcast user actions and state changes giving the application and other modules the opportunity to hook into those events. Additionally, visual components are packaged in a framework-agnostic manner, providing reusable UI components. You'll leave this session understanding the challenges faced when building reusable modules for large-scale applications, and the solutions employed in building out the reusable WFM modules.
Алексей Швайка "Bundling: you are doing it wrong"Fwdays
Начинаете новый проект и не знаете что же выбрать: gulp+browserify, webpack или может brunch? SVG или PNG спрайты? На сколько сабдоменов шардить ресурсы? С повсеместным приходом HTTP/2.0 лучшие практики оптимизации загрузки веб-сайтов и приложений весьма изменились, однако наши инструменты -- нет. Как же деливерить несколько раз в день и не вынуждать пользователен перескачивать весь бандл?
Я расскажу об ограничениях HTTP/1.1, почему возникли бандлеры, как внутри работает HTTP/2.0, какие проблемы он решает, что такое server push, развею пару мифов о минификации, поведаю про преимущества progressive rendering, изменениях в whatwg html5 стандарте и покажу два способа (es6 modules и commonjs без препроцессинга) организации модулей на клиенте.
Overview of The Scala Based Lift Web FrameworkIndicThreads
All of us having experience with other web frameworks such as Struts,Tapestry, Rails, etc would ask “Why another framework? Does Lift really solve problems any differently or more effectively than the ones we’ve used before? The Lift Web Framework provides an advanced set of tools for quickly and easily building real-time, multi-users, interactive web applications. Lift has a unique advantage that no other web framework currently shares: the Scala programming language. Scala is a relatively new language developed by Martin Odersky and his group at EPFL Switzerland. Scala is a hybrid Object Oriented and Functional language that runs at native speeds on the JVM and fully interoperates with Java code. Lift is a hybrid web framework built on Scala. Lift derives its features and idioms from the best of existing web frameworks as well as the functional and OO features in Scala. It compiles to Java bytecode and runs on the JVM, which means that we can leverage the vast ecosystem of Java libraries just as we would with any other java web framework. This presentation details the advantages of this Scala based Web framework over all the existing frameworks that we have used uptil now and shows a small sample application built with Lift. We will create a basic application with a model that maps to RDBMS, web pages that correspond to back end logic and bind dynamically created content to elements on the webpage.
Text Editors (Atom / Sublime)
Apache Server (sftp/ssh/php) – Todd's Server!
CPanel / Wordpress (server side details)
Working with any Web API (Mapping Example)
(facebook, linkedin, twitter, maps, d3.js, jquary)
JSON and HTML <img>
GIT http://www.github.com
An overview of DojoX GFX and DojoX Drawing, and the underlying technology that uses SVG and VML to provide vector-based graphics cross-browser without the use of Flash.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
This presentation talks about an Ekino (www.ekino.com) application made for Microsoft Techdays 2012 in Paris.
This application is based on many new technologies : HTML5, CSS3, IndexedDB, File API, D'n'D, SPA, IE10.
Slides from an HTML5 overview session I presented at work...
This presentation has an accompanying sample webapp project: http://code.google.com/p/html5-playground
Anatomy of a web app
HTML5
CSS3
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
This slideshow provides an introduction to HTML5. The target audience should have an understanding of web development, javascript, and previous standards of HTML. This tutorial contains a brief background on the language and an overview of the most popular features. Features covered include native audio/video support, geolocation, canvas, drawing API, web forms 2.0, drag and drop, and more. Also covered is backwards compatibility and section 508 compliance. Extras include polyfills, modernizr, and a brief introduction to CSS3. Enjoy!
Intro to node.js - Ran Mizrahi (27/8/2014)Ran Mizrahi
Node.js is a platform built on Chrome V8 javascript runtime engine for building fast and scalable, non-blocking, real-time and network applications. In this session Ran will introduce node.js and how to develop large code bases using it. He'll cover the following aspects:
• What is node.js?
• Apache vs. Nginx performance (One thread per connection vs. event loop) and what it has to do with node.js.
• Why node was written in Javascript?
• Main tools and frameworks (Express, socket.io, mongoose etc.)
• TDD/BDD with node.js using mocha and Chai.
Ran Mizrahi, Founder of CoCycles, Passionate entrepreneur and software engineer who loves to continuously innovate and deliver meaningful products while having true fun with the right team.
Como criar um mapa temático interativo com dados abertos e D3.jsHelder da Rocha
Apresentação realizada na trilha JavaScript The Developer's Conference (TDC) Recife 2019. Código e demonstrações disponíveis no GitHub e CodePen (veja links no final).
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofsAlex Pruden
This paper presents Reef, a system for generating publicly verifiable succinct non-interactive zero-knowledge proofs that a committed document matches or does not match a regular expression. We describe applications such as proving the strength of passwords, the provenance of email despite redactions, the validity of oblivious DNS queries, and the existence of mutations in DNA. Reef supports the Perl Compatible Regular Expression syntax, including wildcards, alternation, ranges, capture groups, Kleene star, negations, and lookarounds. Reef introduces a new type of automata, Skipping Alternating Finite Automata (SAFA), that skips irrelevant parts of a document when producing proofs without undermining soundness, and instantiates SAFA with a lookup argument. Our experimental evaluation confirms that Reef can generate proofs for documents with 32M characters; the proofs are small and cheap to verify (under a second).
Paper: https://eprint.iacr.org/2023/1886
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™UiPathCommunity
In questo evento online gratuito, organizzato dalla Community Italiana di UiPath, potrai esplorare le nuove funzionalità di Autopilot, il tool che integra l'Intelligenza Artificiale nei processi di sviluppo e utilizzo delle Automazioni.
📕 Vedremo insieme alcuni esempi dell'utilizzo di Autopilot in diversi tool della Suite UiPath:
Autopilot per Studio Web
Autopilot per Studio
Autopilot per Apps
Clipboard AI
GenAI applicata alla Document Understanding
👨🏫👨💻 Speakers:
Stefano Negro, UiPath MVPx3, RPA Tech Lead @ BSP Consultant
Flavio Martinelli, UiPath MVP 2023, Technical Account Manager @UiPath
Andrei Tasca, RPA Solutions Team Lead @NTT Data
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
JavaONE 2012 Using Java with HTML5 and CSS3
1. 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
2. Agenda
• A short introduction to some cool HTML5
features
• Some ideas about how to explore the
power of HTML5 in Java Web apps
4. Java & HTML: old friends
• 1995: Applets running inside HotJava & Netscape
browsers
• Client-side Java
• First attempt at rich interactive interfaces
• Before applets there was no such thing as
animation and interactivity on the Web
• Scripting and Netscape extensions allowed
Java-HTML communication
5. Today
• Proprietary solutions like Flash became de
facto standards for interactive client-side apps
• Java became popular for server-side apps
• Many tasks that would fit better on the client-
side are still done on the server-side because
of inconsistent browser support
6. HTML5
• Still a versioned spec under W3C, but a versionless
dynamic spec under WHAT-WG (Web Hypertext
Application Technology Working Group)
• Has among its goals to simplify HTML code and
drastically reduce the need for scripting and plugins
• Deals not only with graphical aspects and structure, but
also with networking, multithreading, storage, etc. (which
are no longer part of the official spec)
7. HTML5
is not just HTML
• The “HTML5 solution” includes
• CSS, JavaScript, audio & video, vector graphics
• But also Web sockets, geolocation, offline
cache,Web workers, client-side database, local
storage, etc.
• More than just graphical technologies
8. JSF support?
• There is not yet any official support for
HTML5 from HTML-generating frameworks
such as JSF
• HTML5 support is expected for JSF 2.2
(Java EE 7)
• But any server-side Java apps can use data
sent by HTML5 client-side apps
10. HTML5 Canvas
• API-based vector graphics
1. Place the <canvas> element somewhere (or create it
via scripting)
<canvas id=”mycanvas” width=”200″ height=”200″/>
2. Change its style if you wish
<style> canvas {border: solid black 1px} </style>
3. Get the 2D context
var acanvas = document.getElementById("mycanvas");
var ctx = acanvas.getContext("2d");
4. Use the API to paint your canvas
ctx.fillStyle = "rgb(255,0,0)”;
ctx.fillRect(50, 50, 100, 100);
12. Saving and retrieving
graphics
• Server-side applications can be used to save
the state of HTML5 graphics
• Serializing Canvas or SVG to the server
• Saving parameters that were changed by
the user
• Saved state may be recovered later and be
used to restore page
• Ex: collaborative images, signatures, etc.
13. Saving the state of the canvas
• You can use a Java server-side app to save
the state of a canvas drawn by the client
• Canvas can be converter to image via
API methods (toDataUrl())
Canvas
Servlet
14. CSS3 transforms
• 2D and 3D transforms on any element:
scale, translate, rotate, etc.
• Can be combined with animations and
transitions
• Sophisticated effects can be obtained with
no scripting at all
15. CSS3 animations
• Declarative transitions, 3D animations and
effects like shadows, reflections, etc.
• Reduces the need for scripting
#frente {
position:absolute; top: 0px; left: 0px;
-webkit-transform: translateZ(10px) scaleZ(1.2) scale(0.5);
-webkit-transform-style: preserve-3d;
}
#verso {
position:absolute; top: 0px; left: 0px;
-webkit-transform: translateZ(-10px) scaleZ(1.2) scale(0.5);
-webkit-transform-style: preserve-3d;
}
#cena {
-webkit-animation: flip 8s infinite linear;
-webkit-transform-style: preserve-3d;
}
@-webkit-keyframes flip {
from { -webkit-transform: rotateY(0deg);}
to {-webkit-transform: rotateY(-360deg);}
}
16. SVG - ScalableVector Graphics
• W3C XML standard initially based on Microsoft
VML and Adobe PostScript
• Initially supported by Adobe and Microsoft
• Can be embedded in HTML or linked via the
<img> element
<?xml
version="1.0"
encoding="UTF-‐8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%">
<circle
r="50"
cx="100"
cy="100"
fill="green"/>
<circle
r="50"
cx="125"
cy="125"
fill="green"
fill-‐
opacity="0.5"/>
<circle
r="50"
cx="150"
cy="150"
fill="green"
fill-‐
opacity="0.2"/>
</svg>
17. Saving SVG
• It is not as easy as saving Canvas, since it
requires serializing by third-party client-side
XML processors which are browser-
dependent (need to save the DOM tree)
• But you can easily collect data from the client
side and generate SVG on the server side
• Frameworks like Apache Batik can also
convert SVG to images
18. SVG generation
• Since SVG is XML, it can be generated on
the server-side using XML authoring APIs,
• Can also be generated a a template by
vector software (like Illustrator) and later
modified (inserting DOM nodes, removing,
reordering, etc.)
19. Generating SVG through
XSLT and Java
SVG
template
XSLT
Java
component
javax.xml
APIs
SVG for
embedding
Parameters
PNG,
PDF
21. Other features
• Web database
• Local storage
• Web workers
• Web sockets
• Geolocation
22. Web storage
• Safer local and session storage objects
• Two objects which accept any properties:
localStorage and sessionStorage
• Ex: localStorage.field = “Hi!”;
• localStorage is not shared among tabs
or windows.
• You can’t insert data into them directly
from the server (it has to be via scripting)
23. Client-side database
var db = openDatabase('mydb', '1.0',
'hellodb', 2 * 1024 * 1024);
db.transaction(
function (tx) {
tx.executeSql(
'CREATE TABLE IF NOT EXISTS
mytable(id unique, name)');
tx.executeSql(
'INSERT INTO mytable(id, name)
VALUES (1, ”Jack")');
}
);
• For applications which require a lot of
structured offline data (ex: animations)
24. Web workers
• Threading API for JavaScript
• Create thread code in a JS file, and attach it to a
Worker object
var worker = new Worker(“worker.js”);
• Attach a listener function
worker.onmessage = function(evt) {
alert(evt.data);
};
• Send an asynchronous message
worker.postMessage(“data”);
25. Geolocation
• Uses the navigator object to store
geolocation coordinates
position.coords.latitude & longitude
• Once collected, you can send them
anywhere
• Ex: if you send them to a Java server-side
application, they can be used to generate
an SVG map, for example.
26. Web Sockets
• A completely new protocol that uses HTTP
as a bootstrap
• Also has an IETF spec: RFC 6455
• Allows real-time bidirectional
communication (like Comet)
• Requires support from both the server-side
and the client-side
27. Protocol
• Starts with an HTTP handshake via headers
• After communication is established, data packets can be
exchanged
• Packet format is defined by the protocol spec
GET /mychat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13
Origin: http://example.com
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
29. Client
JavaScript
API
• How
to
use
it
(client-‐side)
var
ws
=
new
WebSocket("ws://localhost:8080/myapp");
ws.onopen
=
funcLon(event)
{
alert("Opened
connecLon!");
}
ws.onmessage
=
funcLon(event)
{
alert("Message:
"
+
event.data);
}
ws.onclose
=
funcLon(event)
{
alert("Closed
connecLon!");
}
ws.send("Hello
World!");
send()
method
Event
handlers
WebSocket
object
30. What about the server side?
• Still no standard. But there should be one
soon (JSR 356 + Java EE 7)
• You can write your own WebSocket server,
of course (study the protocol and handle it
with a java.net.ServerSocket or
javax.servlet implementation)
• You can use Glassfish+Grizzly, Jetty, JBoss,
or some other proprietary solution
31. Battleship
Client-side
var ws;
function initWS() {
ws = new WebSocket("ws://localhost:8080/../WSBattleship");
ws.onmessage = function(event) {
if (gameStarted) {
var msg = event.data.split(":");
if (msg[0] != playerId) {
hitOrMiss(msg[1], msg[2]);
}
}
alert(event.data);
}
}
function hitOrMiss(coords, event) {
if (event == 0) {
markMiss(coords);
} else {
markHit(coords);
}
}
function shoot(ship) {
if (gameStarted && !gameFinished) {
ws.send(playerId + ":" + shotPosition);
}
}
function addShip(ship) {
if (!gameStarted && totalShips < maxShips) {
ships[totalShips++] = ship.id;
ship.style.fill = "red";
}
if (totalShips == maxShips) {
ready = true;
ws.send(playerId); // ready signal!
}
}
32. WebSockets
app
using
Grizzly
• Write the component & socket
• Register the component using a servlet
public class MyServlet extends HttpServlet {
public void init(ServletConfig config) throws ServletException {
WebSocketEngine.getEngine().register(new BattleShipComponent());
}
}
public class BattleShipComponent extends WebSocketApplication {
public WebSocket createSocket(WebSocketListener... listeners) {
return new BattleShipSocket(listeners);
}
public void onMessage(WebSocket socket, String data) {
String gameData = data.split(":");
...
}
} public class BattleShipSocket extends BaseServerWebSocket {
public BattleShipSocket(WebSocketListener... listeners) {
super(listeners);
}
}
34. Summary
• Although there is no official support for HTML5 in Java
Web technologies such as JSF (expected for Java EE 7), Java
server-side apps can enhance client-side HTML5 apps
• Information collected by HTML5 can be used as parameters
for server-side processing, where many Java APIs can be used
• SVG can be easily generated on the server-side and embedded
into HTML pages
• Canvas (and SVG) can be serialized and stored on the server
• WebSocket applications require server-side support.
Currently there are several Java-based proprietary
solutions. JSR 356 aims to standardize this.
• Of course, browser support is still the main concern