View
171
Download
1
Category
Preview:
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
Web e HTML5Bruno Orlandi
Web e HTML5
● Web: HTML, JavaScript, CSS, JSON, PHP…
● HTML5 = HTML + JS + CSS3● HTML5 :
○ Novas tags○ Novas APIs Javascript○ Novos estilos em CSS3
Motivação
Por que HTML5?
● A Web desenvolveu seu padrão
● Qualquer dispositivo “inteligente” terá suporte
Por que 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
Por que HTML5?
● Firefox OS (Web Nativo)
Por que HTML5?
Por que HTML5?
Por que 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
Extensões Chrome● nCage
Extensões Chrome● nPokemon
● http://tinyurl.com/o58ffvz
O Básico
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)
Linguagens● PHP, Java EE, Ruby on Rails, Python, ASP, Perl… :
Linguagem de programação (Servidor)
● SQL : Linguagem de Banco de Dados
● BACK-END
HTML
CSS
JavaScript
jQuery
● Biblioteca Javascript● Facilitar o desenvolvimento de JavaScript.
○ Eventos○ Animações○ Ajax
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
Bootstrap●
Bootstrap●
KickStart●
Foundation●
jQuery Mobile●
Mão na Massa
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
Audio e Video● <audio src=”musica.mp3” controls></audio>
● <video src=”video.mp4” controlswidth=”320” height=”240”></video>
Geolocalização
● Latitude● Longitude● Precisão● Altitude● Direção● Velocidade● getCurrentPosition● watchPosition
WebStorage
● localStorage.setItem(‘chave’,’valor’);● localStorage.getItem(‘chave’);● http://playground.html5rocks.com/
Canvashttp://www.mutantzombiemonsters.com/
http://jogandoeaprendendo.com.br/
http://plaev.github.io/skel/
http://nihas.com.br/amazing.html
Outras
● Drag and Drop nativo● Application Cache● Notificações
Dúvidas?
Recommended