A university lecture for journalism students -- how to use the canvas element to add graphics and animation to Web pages. Updated April 2014. Basics for beginners. See also https://github.com/macloo/canvas
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018Codemotion
CSS siempre se ha considerado la parte menos controlable, complicada, mágica y en ocasiones algo aleatoria :). Houdini nos ofrece un conjunto de APIs y herramientas Javascript que nos dan la posibilidad de extender CSS para acceder al proceso de diseño y estilo del motor de renderizado del navegador. En el motor CSS existe una secuencia de procesos que con Houdini podremos modificar. Tenemos métodos como registerProperty, registerLayout o registerPaint que nos permiten programar nuestros propios módulos totalmente optimizados para que el CSS Engine los interprete de forma nativa.
Find out more presentations at https://madrid2018.codemotionworld.com/speakers/
A university lecture for journalism students -- how to use the canvas element to add graphics and animation to Web pages. Updated April 2014. Basics for beginners. See also https://github.com/macloo/canvas
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018Codemotion
CSS siempre se ha considerado la parte menos controlable, complicada, mágica y en ocasiones algo aleatoria :). Houdini nos ofrece un conjunto de APIs y herramientas Javascript que nos dan la posibilidad de extender CSS para acceder al proceso de diseño y estilo del motor de renderizado del navegador. En el motor CSS existe una secuencia de procesos que con Houdini podremos modificar. Tenemos métodos como registerProperty, registerLayout o registerPaint que nos permiten programar nuestros propios módulos totalmente optimizados para que el CSS Engine los interprete de forma nativa.
Find out more presentations at https://madrid2018.codemotionworld.com/speakers/
Ever since we broke apart the front and back-end of our systems, we’ve longed to partially reunite them with a shared language. The benefits of code reuse and shared tooling are compelling but is this nirvana possible? In this session we will explore building both the front (mobile and web) and back-end of an application with a shared Kotlin codebase. You will learn how to setup the build, share code, and deploy the back-end as a serverless app.
An introduction to making browser based games in JavaScript and HTML5.
This workshop was presented at an open day for the Academy of Interactive Entertainment in Sydney, Australia on November 17, 2012.
Introduction to Game Programming TutorialRichard Jones
The slides to accompany the Introduction to Game Programming tutorial I ran at LCA 2010. The tutorial ran over 90 minutes with the participants following along.
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
Wouldn't it be cool to be able to use CSS3 and HTML5 unfettered by the lack of support in IE? Mobile developers for smart phones get to do just that!
When developing for iPhones, iPods, iPads and Android devices—mobile devices using webkit browsers—we can use CSS animations, transforms, multiple background images, rounded corners, text and box shadows, CSS columns, and HTML5 form elements.
In this session we'll use some CSS3 features learned in earlier session to create a native looking iPhone web app. We'll also cover some CSS UI and HTML5 form elements that will help you get up to speed on developing for mobile webkit. You don't have to wait any longer to use CSS3!
Ever since we broke apart the front and back-end of our systems, we’ve longed to partially reunite them with a shared language. The benefits of code reuse and shared tooling are compelling but is this nirvana possible? In this session we will explore building both the front (mobile and web) and back-end of an application with a shared Kotlin codebase. You will learn how to setup the build, share code, and deploy the back-end as a serverless app.
An introduction to making browser based games in JavaScript and HTML5.
This workshop was presented at an open day for the Academy of Interactive Entertainment in Sydney, Australia on November 17, 2012.
Introduction to Game Programming TutorialRichard Jones
The slides to accompany the Introduction to Game Programming tutorial I ran at LCA 2010. The tutorial ran over 90 minutes with the participants following along.
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
Wouldn't it be cool to be able to use CSS3 and HTML5 unfettered by the lack of support in IE? Mobile developers for smart phones get to do just that!
When developing for iPhones, iPods, iPads and Android devices—mobile devices using webkit browsers—we can use CSS animations, transforms, multiple background images, rounded corners, text and box shadows, CSS columns, and HTML5 form elements.
In this session we'll use some CSS3 features learned in earlier session to create a native looking iPhone web app. We'll also cover some CSS UI and HTML5 form elements that will help you get up to speed on developing for mobile webkit. You don't have to wait any longer to use CSS3!
Explore how you can easily add advanced functionality to your web projects by adding jQuery. JQuery for web development
https://www.udemy.com/web-development-introduction-to-jquery/?couponCode=SLIDESHARE
Responsive Web Design for Universal Access 2016Kate Walser
You can improve how well your website works and looks across different devices using responsive web design techniques. But did you know you can also improve access for all users, including those with disabilities, by applying responsive techniques? Learn how.
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 and CSS3 have taken shape and are being put to use everyday. What does this mean for you and how do you know if you are leveraging them correctly? Shay Howe, user interface engineer at Groupon, will break down HTML5 and CSS3 showing you how to build a better user interface and improve the over all user experience. New HTML5 input types and CSS3 rounded corners are just the begging, learn what else can help bring your website to the next level.
This presentation covers the working model about Process, Thread, system call, Memory operations, Binder IPC, and interactions with Android frameworks.
HTML5 is all the rage with the cool kids, and although there's a lot of focus on the new language, there's lots of interesting new JavaScript APIs both in the HTML5 spec and separated out. This presentation will take you through demos and code and show off some of the outright crazy bleeding edge demos that are being produced today using the new JavaScript APIs.
A look at how HTML5 aims to plug the holes that Flash has been filling in browsers for the last decade, looking at both HTML5 and non-HTML5 JavaScript APIs.
For Flash Brighton in Feb 2010.
2014 yılının sonunda sonlandırılması beklenen HTML standardının 5. sürümü çoktandır tarayıcılar tarafından destekleniyor. HTML5 ile gelen Canvas, Websockets ve diğer özelliklerle nasıl daha canlı, daha Flash uygulamalarına benzer, web uygulamaları geliştirebileceğimizi inceledik.
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
HTML5 is all the rage with the cool kids, and although there’s a lot of focus on the new language, there’s plenty for web app developers with new JavaScript APIs both in the HTML5 spec and separated out as their own W3C specifications. This session will take you through demos and code and show off some of the outright crazy bleeding edge demos that are being produced today using the new JavaScript APIs. But it’s not all pie in the sky – plenty is useful today, some even in Internet Explorer!
Flash over the years, has been used to prop up the regular browser like a sad old man drinking alone in a pub.
Today browsers come shipped with technology designed to rival flash and aim to shut it squarely out of the game.
Are browser ready to rock without Flash?
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
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
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
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.
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/
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Assuring Contact Center Experiences for Your Customers With ThousandEyes
How to build a html5 websites.v1
1. An Introduction to
HTML5 CSS3 &
Dasharatham Bitla (Dash)
dash@bitlasoft.com | http://weblog.bitlasoft.com
www.BitlaSoft.com
2. Browsers Started a Revolution that Continues
In 1995 Netscape introduced JavaScript
In 1999, Microsoft introduces XMLHTTP
In 2002, Mozilla 1.0 includes XMLHttpRequest natively
... Then web applications started taking off ...
In 2004, Gmail launches as a beta
In 2005, AJAX takes off (e.g. Google Maps)
Now web applications are demanding more
capabilities
4. Necessary for modern web apps
Standardization
Cross-platform
Apple Safari, Google Chrome, Mozilla Firefox, and
Opera
Even IE9 will support HTML5
mobile web browsers that come pre-installed on
iPhones, iPads, Android ..
Scribd/YouTube to HTML5
Apple pushing back on Flash - why?
Google Gears no longer be supported infavor of
HTML5
12. HTML 5 Features
Client-side Database Storage
sessionStorage
Application Cache - Offline
SQLite in browser
2D Graphics – Canvas/SVG
Video/Audio
Geo location
Speed
Web Workers
UI tools
Forms 2.0
13. <!doctype html>
• new structural elements
<section>,<header>,<footer>,<nav>,...
• new inline elements
• dynamic pages support
• form types
• media elements
<canvas>,<video>,<audio>
• some old elements removed
• getElementsByClassName
14. new Javascript APIs
• <canvas> and graphics context
• local and session storage
• web database
• web worker
• websocket
• geolocation
• offline webapplications
• Custom content handlers, ping attribute, cross-
document messaging, Audio interface, video element,
Server-sent DOM events, contenteditable attribute, Drag
& drop, DOMContentLoaded, Web Workers, Offline Web
applications, MathML, inline SVG, Web Forms 2.0
•
26. <video>
Allows a page to natively play video
No plugins required
As simple as including an image - <video
src=“video.mp4” controls autoplay> Not
supported</video>
Has built-in playback controls
Stop, Pause, Play,
Scriptable, in case you want your own dynamic
control
31. SVG & Canvas
Could not draw on the web
Flash etc was there … but
Graphics intrinsic part of the web
Embedded into web platform
HTML
DOM
Fits directly into CSS3 and JS scriptable
32. SVG
HTML like tags for drawing
Draw into the page …
Make it interactive …
Scale it without any distortion/pixelation …
What can you do with this now???
<rect width="300" height="100” style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)“ id=“myRect”/>
<circle cx="100" cy="50" r="40" stroke="black“ stroke-width="2"
fill="red"/>
var myRect = doc.getElemntById(“myRect”);
myRect.style.fill = „green‟;
myRect.onclick = function() {alert(“hello”);}
33. http://www.mozilla.com/en-US/firefox/stats/
SVG
Highlevel
Import/Export
Easy Uis
Intractive
Medium Animatin
Tree of Objects
Canvas
Low level
No mouse interaction
High animation
JS Centric
More Bookkeeping
35. Canvas API
JS API – Scriptable Image API
<canvas id=“myCan” width=“200” height=“200”>
</canvas>
var canvas = document.getElementById(“myCan”);
Vat ctx = canvas.getContext(„2d‟);
ctx.fillStyle=“rgb(200,0,0)”;
ctx.fillRect (10,10,55,50);
ctx.fillStyle=“rgba(200,0,0,0.5)”;
ctx.fillRect (30,30,55,50);
WebGL based on Open GL for 3d context
36.
37. <canvas>
Create a virtual canvas for drawing graphics in the browser.
Javascript can be used to control graphic rendering via the
canvas.
x,y coordinate system
html:
<canvas id="graph" width="400" height="400">
this is displayed when the tag is not supported...
</canvas>
javascript:
var g = document.getElementById('graph');
if (g && g.getContext) {
var c = g.getContext('2d');
}
39. <canvas>
// canvas is a reference to a <canvas> element
var context = canvas.getContext('2d');
context.fillRect(0,0,50,50);
canvas.setAttribute('width', '300'); // clears the canvas
context.fillRect(0,100,50,50);
canvas.width = canvas.width; // clears the canvas
context.fillRect(100,0,50,50); // only this square remains
(reproduced from http://www.whatwg.org/specs/web-
apps/currentwork/#
canvas with permission)
40. fill, stroke, lines, Rect
context.fillStyle = '#00f'; // blue
context.strokeStyle = '#f00'; // red
context.lineWidth = 4;
// Draw some rectangles.
context.fillRect (0, 0, 150, 50);
context.strokeRect(0, 60, 150, 50);
context.clearRect (30, 25, 90, 60);
context.strokeRect(30, 25, 90, 60);
41. Path
// Set the style properties.
context.fillStyle = '#00f';
context.strokeStyle = '#f00';
context.lineWidth = 4;
context.beginPath();
// Start from the top-left point.
context.moveTo(10, 10); // give the (x,y)
coordinates
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
// Done! Now fill the shape, and draw the
stroke.
context.fill();
context.stroke();
context.closePath();
42. Arcs, Curves
arc(x, y, radius, startAngle, endAngle, anticlockwise)
quadraticCurveTo(cp1x, cp1y, x, y) // (BROKEN in FF 3.5)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
Styles and Colors
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.strokeStyle = "rgba(255,0,0,0.5)";
lineWidth = value
lineCap = type
lineJoin = type
miterLimit = value
createLinearGradient(x1,y1,x2,y2)
createRadialGradient(x1,y1,r1,x2,y2,r2)
addColorStop(position, color)
createPattern(image,type)
49. Geo Location
Browsers are now location enabled
iPhone, Android leverages it too
Navigator.geolcation.getCurrentPosition(
function(position) {
var lat = position.,coords.latitude;
var lan = position.,coords.longiture;
showLocation(lat, lan);
}
);
50. geolocation
function doLocation() {
if (navigationSupported() ) {
navigator.geolocation.getCurrentPosition(
showPosition,
positionError,
{
enableHighAccuracy:false,
timeout:10000,
maximumAge:300000
}
);
}
}
function showPosition(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("location-map"));
var weAreHere = new GLatLng(lat, lon);
map.setCenter(weAreHere, 13);
var marker = new GMarker(weAreHere);
map.addOverlay( marker );
marker.bindInfoWindowHtml("You are here");
map.setUIToDefault();
}
}
52. Native apps have threads and processes
Workers provide web apps with a means for concurrency
Can offload heavy computation onto a separate thread so
your app doesn’t block
Run JS in the background without clogging the UI threads
Come in 3 flavors
– Dedicated (think: bound to a single tab)
– Shared (shared among multiple windows in an origin)
– Persistent (run when the browser is “closed”)
53.
54. WEB Sockets
Allows bi-directional communication between
client and server in a cleaner, more efficient
form than hanging gets (or a series of
XMLHttpRequests)
Specification is under active development
56. Application Cache
Application cache solves the problem of how to
make it such that one can load an application URL
while offline and it just works
Web pages can provide a manifest of files that
should be cached locally
These pages can be accessed offline
Enables web pages to work without the user being
connected to the Internet
Database and app cache store together can do a
great job
Going Offline in Gmail – what happens?
Gmail on iPhone – how it works?
Google stopped supporting Gears in favor of HTML5
60. Local Storage
Provides a way to store data client side
Useful for many classes of applications, especially in
conjunction with offline capabilities
2 main APIs provided: a database API (exposing a SQLite
database) and a structured storage api (key/value pairs)
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM MyTable', [],
function(tx, rs) {
for (var i = 0; i < rs.rows.length; ++i) {
var row = rs.rows.item(i);
DoSomething(row['column']);
}
});
});
61. localStorage / sessionStorage
// visible to all windows loaded from same location
localStorage.setItem('currency','EUR');
var currency = localStorage.getItem('currency');
// stored in window object, deleted on close
sessionStorage.setItem('currency','EUR');
var currency = sessionStorage.getItem('currency');
62. web database
$(document).ready(function() {
var shortName = "Shopping";
var version = "1.0";
var displayName = "Shopping";
var maxSize = 65536; // in kilobytes
db = openDatabase(shortName, version, displayName, maxSize);
db.transaction(
function(transaction) {
transaction.executeSql(
'create table if not exists entries ' +
'(id integer not null primary key autoincrement, ' +
' name text not null, row integer not null, section
integer not null);'
);
}
);
});
63. web database
function addarticle() {
var article = $('#article').val();
var row = $('#row').val();
var section = $('#section').val();
db.transaction(
function(transaction) {
transaction.executeSql(
'insert into entries(name,row,section) values(?,?,?);',
[article, row, section],
function() {
refreshEntries();
jQT.goBack();
},
errorHandler
);
}
);
$('#articleform')[0].reset();
return false;
}
function errorHandler(transaction, error) {
alert('Sorry, save failed - ' + error.message + '(code:' + error.code +')');
// returning true halts execution and rolls back
return true;
}
64. What are the benefits of using HTML5
Cleaner markup
Additional semantics of new elements like <header>,
<nav>, and <footer>
make it a lot easier for search engines and
screenreaders to navigate our pages, and improve the
web experience for everyone
New form input types and attributes that will (and in
Opera‟s case, do) take the hassle out of scripting forms
Staying ahead of the curve before HTML5 becomes the
mainstream markup language. Use this as a selling point
when talking with your clients
HTML5 and iPhone/smartphone (apps without C)
– PhoneGap, Rhodes, Titanium
65. What are the downsides to using HTML5
The spec isn’t finished and is likely to change
Not everything works in every browser (but you could
say the same about CSS, right?
the good news is
in the mobile world, the situation is much better
iPhone, Android use WebKit based browsers
supports offline web app, web database, canvas,
geolocation, ...
66. can I use ... ?
support still incomplete across browsers
IE9 promise to offer full support
for some features, javascript workaround available:
• canvas : excanvas.js gives support in IE (all versions)
<canvas> can be used today
• HTML5 elements: html5shiv
fixes DOM tree and adds styling
check
http://caniuse.com
(among others)
67. can I use ... ?
Use feature detection, not browser detection
Modernizr (http://www.modernizr.com/) creates a global object
that you can check:
if (Modernizr.video) {
// video element is supported
} else {
// fall back
}
68. Detecting
Using Modernizr - http://www.modernizr.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
72. preview on desktop
This can now:
- launch from home screen (as web clip)
- run fullscreen on phone
- store data locally
- run offline
But can not:
- access hardware (sound, vibrate)
- be submitted to app store
73. PhoneGap
- compiles to native app for iPhone, Android, Blackberry
- abstracts away native API differences
- need SDK for each target device
- open source (MIT license)
- navigator.notification.vibrate() , .beep(), .alert()
75. Conclusions
low barrier to entry for mobile
familiar language HTML,CSS and JS
use canvas / excanvas for graphs (no Flash needed)
PhoneGap (and others) for cross-platform
development
Rhodes if you are a Ruby Geek
some of this can be used now
79. New Styles
border-radius - Rounded Corners
border-colors - Gradient Borders
box-shadow - Drop Shadows
text-shadow - Text Drop Shadows
gradient - Gradient backgrounds
resize - Resize an Element
background-size - resize background
background - supports multipe images
80. Selectors
A Variety of Selectors provide an interface to apply
styles more precisely.
getElementByClassName
An example would be selecting an nth child.
Example: div:nth-child(3) {}
Columns
Multi Column Layout is now provided by CSS3
81. Animation and Motion
Animations - CSS3 allows for animations of styles
Transitions - Allows styles to change gradually color
shifts
Transformations - 2D and 3D transformations,
stretch, move, etc
82. New color formats in CSS3
HSL – hsl(hue, saturation, lightness)
CMYK – cmyk(cyan, magenta, yellow, black)
HSLA – hsl(hue, saturation, lightness, alpha)
RGBA – rgba(red, green, blue, alpha)
83. More Resources
HTML 5 Doctor - http://html5doctor.com/
HTML 5 Spec - http://dev.w3.org/html5/spec/Overview.html
http://apirocks.com/html5/html5.html
http://jqtouch.com/preview/demos/main/
http://www.w3schools.com/svg/
http://www.canvasdemos.com/
http://motyar.blogspot.com/2010/04/drawing-on-web-with-canvas-
and-jquery.html
http://code.google.com/p/svgweb/