Web e HTML5
-
Upload
bruno-orlandi -
Category
Software
-
view
170 -
download
1
description
Transcript of Web e HTML5
![Page 1: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/1.jpg)
Web e HTML5Bruno Orlandi
![Page 2: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/2.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/3.jpg)
Motivação
![Page 4: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/4.jpg)
Por que HTML5?
● A Web desenvolveu seu padrão
● Qualquer dispositivo “inteligente” terá suporte
![Page 5: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/5.jpg)
Por que HTML5?
![Page 6: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/6.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/7.jpg)
Por que HTML5?
● Firefox OS (Web Nativo)
![Page 8: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/8.jpg)
Por que HTML5?
![Page 9: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/9.jpg)
Por que HTML5?
![Page 10: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/10.jpg)
Por que HTML5?
![Page 11: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/11.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/12.jpg)
Extensões Chrome● nCage
![Page 13: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/13.jpg)
Extensões Chrome● nPokemon
● http://tinyurl.com/o58ffvz
![Page 14: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/14.jpg)
O Básico
![Page 15: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/15.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/16.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/17.jpg)
HTML
![Page 18: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/18.jpg)
CSS
![Page 19: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/19.jpg)
JavaScript
![Page 21: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/21.jpg)
jQuery
● Biblioteca Javascript● Facilitar o desenvolvimento de JavaScript.
○ Eventos○ Animações○ Ajax
![Page 22: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/22.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/23.jpg)
Bootstrap●
![Page 24: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/24.jpg)
Bootstrap●
![Page 25: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/25.jpg)
KickStart●
![Page 26: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/26.jpg)
Foundation●
![Page 27: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/27.jpg)
jQuery Mobile●
![Page 28: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/28.jpg)
Mão na Massa
![Page 30: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/30.jpg)
HTML5
![Page 31: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/31.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/32.jpg)
Audio e Video● <audio src=”musica.mp3” controls></audio>
● <video src=”video.mp4” controlswidth=”320” height=”240”></video>
![Page 34: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/34.jpg)
Geolocalização
● Latitude● Longitude● Precisão● Altitude● Direção● Velocidade● getCurrentPosition● watchPosition
![Page 35: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/35.jpg)
WebStorage
● localStorage.setItem(‘chave’,’valor’);● localStorage.getItem(‘chave’);● http://playground.html5rocks.com/
![Page 36: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/36.jpg)
Canvashttp://www.mutantzombiemonsters.com/
http://jogandoeaprendendo.com.br/
http://plaev.github.io/skel/
http://nihas.com.br/amazing.html
![Page 37: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/37.jpg)
Outras
● Drag and Drop nativo● Application Cache● Notificações
![Page 38: Web e HTML5](https://reader034.fdocument.pub/reader034/viewer/2022052316/559811411a28ab491f8b4711/html5/thumbnails/38.jpg)
Dúvidas?