The Web platform

?

@mathjazz

Mozilla

Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good.

Firefox

Boot to Gecko

Marketplace

Persona

WebFWD

The Web is the Platform

Why does it matter?

OPEN: eveyone can participate. HTML for example, is designed to be forward compatible, allowing new HTML entities to be ignored by Web browsers which do not understand them without causing the document to be unusable. SUPPORT FROM GOOGLE; APPLE; MICROSOFT; MOZILLA; OPERA; FACEBOOK

What isn't HTML5?

Who cares?!

It doesn't matter how we call them, the web platform is here to stay.

Can I use it today?

One size fits all?

According to a report released on 30 September 2011, 34 of the world's top 100 Web sites were using HTML5 – the adoption led by search engines and social networks.

Web design strategies

Graceful degradation: designers would create Web pages for the latest browsers that would also work well in older versions of browser software.
Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies.

Workarounds

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively (e.g. canvas support in IE).
Fallback: basic functionality still works

Resources

HTML5 != XML

Backwards compatibility. But you can use XML serialization XHTML5 and serve it as XML MIME type

HTML5 semantics

Doctype

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5

<!DOCTYPE html>

Character encoding

HTML 4.01

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

HTML5

<meta charset="UTF-8">

Structure & content

joshduck.com/
periodic-table.html

CLICK

HTML5 Forms

New form types #1

Uporabno predvsem za validacijo. Novi gradniki v brskalnikih, odpiranje tipkovnice na mobilnikih, tooltipi.

New form types #2

New form attributes #1

New form attributes #2

New form elements #1

<input type="text" list="data">

<datalist id="data">
<option value="Jacob">
<option value="Joe">
<option value="John">
</datalist>

New form elements #2

New form elements #3

<video>

Default Syntax

<video src="my-video.webm">

Syntax with controls

<video controls src="my-video.webm">

Syntax with various codes

Bulletproof syntax

<video controls src="http://vid.ly/4w2g7d?content=video">

SLEDI VIDEO

universalsubtitles.org

SLEDI VIDEO

Mozilla Popcorn

CLICK http://popcornjs.com/. Think BSPlayer vs. YouTube (Flash video vs. HTML5 video)

<audio>

Audio Data API

CLICK

<canvas>

HTML

API

Silk

CLICK

This Shell

CLICK

PDF.js

CLICK

WebGL

WebGL (Web-based Graphics Library) is a software library that extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser. WebGL code executes on a computer display card's Graphics Processing Unit (GPU), which must support shader rendering.

Zygote Body

CLICK

Three.js

CLICK

webglsamples

CLICK

ContentEditable

Contenteditable attribute makes HTML elements' textNodes editable. Useful for wikis, CSMs, itd.
The fundamental cause of trouble in the world is that the stupid are cocksure while the intelligent are full of doubt.
—Bertrand Russell

Pontoon

CLICK

Geolocation

Omogoča pridobivanje podatkov o lokaciji uporabnika s pomočjo IP address and details of nearby wireless networks. The georeferenced WiFi data used to geocode your request was collected when Google was driving around taking pictures for StreetView.

isgeolocationpartofhtml5.com

Example

Drag and drop

Dropmocks

CLICK

Example

File API

HTML

API

Plupload

CLICK

History API

HTML5 introduced the history.pushState() and history.replaceState() methods, which allow you to add and modify history entries, respectively. This is needed in modern web apps

Infinite scroll

CLICK

On http://example.com/foo.html:

This will cause the URL bar to display http://example.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists. If you go to some site and click back, browser will load http://example.com/bar.html.

WebSockets

Open an interactive communication session between the browser and a server. Send messages to a server and receive event-driven responses without having to poll the server for a reply. No need for AJAX, a move from polling to pushing, important for real-time applications.

Example

postMessage

A method for safely enabling cross-origin communication. Used in this slides, Pontoon, etc.

Example

Data storage

Storing data on the client side.

Cookies suck

Complicated, hard to work with, stupid date format, deleting is ridiculous.

Example

session: dokler je okno odprto, nova okna iz iste domene nimajo dostopa; local: takoj na voljo na vseh oknih iz iste domene, potrebno ročno zbrisati
Slabo queryjanje, slabe performanse, malo prostora, "locakanje", neskalabilnost ...

IndexedDB

CLICK! IndexedDB is an API for client-side storage of significant amounts of structured data and for high performance searches on this data using indexes. While DOM Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution.

Offline

Making apps work even without internet connection. B2G, ChromeOS...

Example

IF Firefox, Opera ELSE IE

Check if online

Application Cache

HTML5 supports offline caching of web applications' resources; files are stored in an application cache—a collection of resources obtained from a cache manifest file (*.appcache) included in the web application.

CSS3

HTML določa struturo dokumenta, JS in APIji obnašanje, CSS pa izgled in učinke.

css3please.com

CLICK! border-radius, box-shadow, gradient, transform (rotate, scale), transition, text-shadow, opacity, animation

-prefix-free

Lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. Just include prefixfree.js anywhere in your page.

Media queries

HTML5 supports offline caching of web applications' resources; files are stored in an application cache—a collection of resources obtained from a cache manifest file (*.appcache) included in the web application.

Less Framework

CLICK

@font-face

google.com/webfonts

CLICK

Developer Tools

Credits