38
Web e HTML5 Bruno Orlandi

Web e HTML5

Embed Size (px)

DESCRIPTION

Apresentação para motivar o estudo de Web com HTML5 e um pequeno exemplo prático de como começar a desenvolver aplicações Web.

Citation preview

Page 1: Web e HTML5

Web e HTML5Bruno Orlandi

Page 2: Web e HTML5

Web e HTML5

● Web: HTML, JavaScript, CSS, JSON, PHP…

● HTML5 = HTML + JS + CSS3● HTML5 :

○ Novas tags○ Novas APIs Javascript○ Novos estilos em CSS3

Page 3: Web e HTML5

Motivação

Page 4: Web e HTML5

Por que HTML5?

● A Web desenvolveu seu padrão

● Qualquer dispositivo “inteligente” terá suporte

Page 5: Web e HTML5

Por que HTML5?

Page 6: Web e HTML5

Por que HTML5?● Aplicações Web● Aplicações Mobile

○ Dois modos de desenvolver:○ Aplicação totalmente Web (Browser)○ Aplicação Web embarcada na Nativa

■ Offline■ Sensação de Nativa

Page 7: Web e HTML5

Por que HTML5?

● Firefox OS (Web Nativo)

Page 8: Web e HTML5

Por que HTML5?

Page 9: Web e HTML5

Por que HTML5?

Page 10: Web e HTML5

Por que HTML5?

Page 11: Web e HTML5

JavaScript: da Web ao Infinito● V8 JSEngine

● on{x}

● Google Apps Script

● Aplicações Desktop (Windows 8 e Linux)

● Extensões GNOME

● Extensões Chrome

Page 12: Web e HTML5

Extensões Chrome● nCage

Page 13: Web e HTML5

Extensões Chrome● nPokemon

● http://tinyurl.com/o58ffvz

Page 14: Web e HTML5

O Básico

Page 15: Web e HTML5

Linguagens● HTML: Linguagem de descrição de conteúdo.

● CSS: Linguagem de descrição de estilo.

● JavaScript: Linguagem de Programação. (Cliente)

○ Surgiu para manipular páginas Web e torná-las mais

dinâmicas.

○ Hoje possui muito mais usos.

○ Orientado à Eventos

● FRONT-END

● Linguagens Interpretadas (não compiladas)

Page 16: Web e HTML5

Linguagens● PHP, Java EE, Ruby on Rails, Python, ASP, Perl… :

Linguagem de programação (Servidor)

● SQL : Linguagem de Banco de Dados

● BACK-END

Page 17: Web e HTML5

HTML

Page 18: Web e HTML5

CSS

Page 19: Web e HTML5

JavaScript

Page 20: Web e HTML5

JavaScript

http://tinyurl.com/lbgx2r7

Page 21: Web e HTML5

jQuery

● Biblioteca Javascript● Facilitar o desenvolvimento de JavaScript.

○ Eventos○ Animações○ Ajax

Page 22: Web e HTML5

Frameworks● Conjunto de código pronto

○ HTML + CSS + JS● Facilita e Agiliza o desenvolvimento● Responsivos● Menus, Botões, Icones, etc…● Existem também os Frameworks back-end

Page 23: Web e HTML5

Bootstrap●

Page 24: Web e HTML5

Bootstrap●

Page 25: Web e HTML5

KickStart●

Page 26: Web e HTML5

Foundation●

Page 27: Web e HTML5

jQuery Mobile●

Page 28: Web e HTML5

Mão na Massa

Page 29: Web e HTML5

A Calculadora

http://tinyurl.com/kqbxuhc

Page 30: Web e HTML5

HTML5

Page 31: Web e HTML5

O que há de novo?● Vários recursos e APIs● Interoperabilidade entre dispositivos● Gráficos 2D e 3D● Multimídia● Performance● Semântica● Conectividade em Tempo Real● Armazenamento offline

Page 32: Web e HTML5

Audio e Video● <audio src=”musica.mp3” controls></audio>

● <video src=”video.mp4” controlswidth=”320” height=”240”></video>

Page 33: Web e HTML5

Geolocalização

http://html5demos.com/geo

Page 34: Web e HTML5

Geolocalização

● Latitude● Longitude● Precisão● Altitude● Direção● Velocidade● getCurrentPosition● watchPosition

Page 35: Web e HTML5

WebStorage

● localStorage.setItem(‘chave’,’valor’);● localStorage.getItem(‘chave’);● http://playground.html5rocks.com/

Page 37: Web e HTML5

Outras

● Drag and Drop nativo● Application Cache● Notificações

Page 38: Web e HTML5

Dúvidas?