Tweet
Tweet

Slide 1

Slide 1 text

HTML5 Everything changes...

Slide 2

Slide 2 text

HTML5 is awesome!

Slide 3

Slide 3 text

HTML 4

Título de un artículo

Había una vez... un ninja que estaba sólo.

Slide 4

Slide 4 text

HTML5

Título de un artículo

Había una vez... un ninja que estaba sólo.

Slide 5

Slide 5 text

HTML5

Título de un artículo

Había una vez... un ninja que estaba sólo.

Slide 6

Slide 6 text

Thanks!

Slide 7

Slide 7 text

HTML5 is awesome!

Slide 8

Slide 8 text

HTML5 HTML CSS JavaScript

Slide 9

Slide 9 text

Collection of tools • Semantics • Offline & Storage • Devices Access • Connectivity • Multimedia • 3D, Graphics & Effects • Performance & Integration

Slide 10

Slide 10 text

Semantics & Markup

Slide 11

Slide 11 text

Semantics • More meaningful elements • Better semantic tags and attributes • Semantic structure • Microdata / Microformats • ARIA attributes • New form types • More simple and cool

Slide 12

Slide 12 text

Doctype

Slide 13

Slide 13 text

Doctype • Switch the content into standards mode • Prevent quirks mode • Case-insensitive

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Better semantic tags

Slide 18

Slide 18 text

HTML 4

Slide 19

Slide 19 text

HTML5

Slide 20

Slide 20 text

Custom data attribute

Slide 21

Slide 21 text

Custom data attribute data-* inside HTML elements Parse them using JavaScript (getAttribute method) * = custom attributes: user, name, phone, id, chico, meli, etc...

Slide 22

Slide 22 text

data-* Cámaras

Slide 23

Slide 23 text

data-* Cámaras

Slide 24

Slide 24 text

Mircrodata • Semantic attributes and properties • Search engines, Web crawlers, Browsers • Provide a richer browsing experience for users

Slide 25

Slide 25 text

I’m going to the Salter Cane gig next week. Excited!

Slide 26

Slide 26 text

ARIA

Slide 27

Slide 27 text

ARIA attributes • Improve the accessibility of RIAs • JavaScript components • Helps with dynamic content • Semantic attributes and properties: • roles (tree, navigation, presentation) • properties (aria-selected, aria-hidden)

Slide 28

Slide 28 text

Comprar

Slide 29

Slide 29 text

For Nerds, by Nerds

Slide 30

Slide 30 text

Forms

Slide 31

Slide 31 text

New forms • Semantic types and attributes • Mobile compatibility • Validation engine • Custom patterns • More control

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Offline & storage

Slide 36

Slide 36 text

Web Storage • Local storage / Session storage • IndexedDB • Application Cache (offline apps)

Slide 37

Slide 37 text

Local Storage • JavaScript API • Cliente-side database • Key-value notation (JSON) • Stored in users browsers • 5 MB (per domain) • the data persists (after the browser is shutdown or the session is closed)

Slide 38

Slide 38 text

  • Fruits
    • Oranges
    • Pineapples
      • ...

Slide 39

Slide 39 text

Session Storage = Local Storage

Slide 40

Slide 40 text

limited to the time span where the current window is open once the window is shut will be invalid Session Storage = Local Storage

Slide 41

Slide 41 text

IndexDB

Slide 42

Slide 42 text

IndexDB • Web SQL database must die! • Object Store • http://www.html5rocks.com/en/ tutorials/indexeddb/todo/

Slide 43

Slide 43 text

AppCache

Slide 44

Slide 44 text

AppCache • Offline First • Chache manifest (*.appcache => file) • Load from local cache (HTML, CSS, JS and images) • mimetype: text/cache-manifest • 5MB (chrome = unlimitedStorage) • window.applicationCache

Slide 45

Slide 45 text

CACHE MANIFEST # v0.11 CACHE: versions/latest/chico.css versions/latest/jquery.js versions/latest/chico.js src/assets/ninja.png NETWORK: *

Slide 46

Slide 46 text

Device Access

Slide 47

Slide 47 text

Device Access • Geolocation API • Camera / Microphone • Local Data (contacts and events) • Device Orientation • Device Motion • Vibration • Notification

Slide 48

Slide 48 text

Device Access • Geolocation API • Camera / Microphone • Local Data (contacts and events) • Device Orientation • Device Motion • Vibration • Notification

Slide 49

Slide 49 text

Connectivity

Slide 50

Slide 50 text

Connectivity • Web Sockets • Server-sent events • Real time

Slide 51

Slide 51 text

Web Sockets • JavaScript API • Real time connections • Bi-directional communications

Slide 52

Slide 52 text

Who is using Web Sockets? • Facebook (chat, notifications, comments) • Gmail • Twitter

Slide 53

Slide 53 text

Multimedia

Slide 54

Slide 54 text

Multimedia •Video •Audio

Slide 55

Slide 55 text

Who is using Multimedia? • Youtube • Vimeo • GrooveShark

Slide 56

Slide 56 text

Video Audio

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

3D, Graphics, Effects

Slide 59

Slide 59 text

3D, Graphics, Effects • SVG • Canvas • WebGL • CSS3 3D

Slide 60

Slide 60 text

SVG • Scalable Vector Graphic • Language for rich graphical content like as: • Pie charts, • Two-dimensional graphs

Slide 61

Slide 61 text

!

Slide 62

Slide 62 text

Canvas • HTML Element • Draw graphics (with JavaScript) • Control every pixel

Slide 63

Slide 63 text

Canvas

Slide 64

Slide 64 text

WebGL • Web-based Graphics Library • Interactive 3D graphics • Canvas 3D • JavaScript API

Slide 65

Slide 65 text

http:/ /helloracer.com/webgl/ WebGL

Slide 66

Slide 66 text

Performance & Integration

Slide 67

Slide 67 text

Performance & Integration •Web Workers •XMLHttpRequest2

Slide 68

Slide 68 text

Web Workers •JavaScript API •Load JS file dynamically •Process code in a background •Multi JavaScript thread

Slide 69

Slide 69 text

XMLHttpRequest2 •Ajax •Uploading progress events (progress tag) •Working with files (file system api) •FormData •CORS (cross domain request)

Slide 70

Slide 70 text

CSS3

Slide 71

Slide 71 text

CSS3 • Transitions • Animations • Transforms • Gradients • Rounded corners • Flexible Box Model • Multi-column Webfonts Text wrapping Columns Opacity Backgrounds CSS selectors Shadows

Slide 72

Slide 72 text

Transforms, Transitions and Animations http:/ /leaverou.github.com/animatable/ http:/ /cubic-bezier.com/#.17,.67,.83,.67

Slide 73

Slide 73 text

Gradients btn.primary { background-image: linear-gradient(top, #BACDFF, #4055A5 3%, #283077); }

Slide 74

Slide 74 text

Rounded corners btn.primary { border-radius: 5px; }

Slide 75

Slide 75 text

CSS selectors p:nth-child(3) { } input:checked { } p:first-of-type { } p ~ ul { }

Slide 76

Slide 76 text

Thanks!