SlideShare uma empresa Scribd logo
1 de 48
HTML5
Dando uma repaginada no “negócio”.
HTML5 É TOP NA BALADA!
O que realmente é html5?
Semantics
Dando significado as coisas, é a grande
mudança que o html5 nos traz. Introdução de
tags que melhoram a compreensão do código
para o browser,
leitores e robôs.
Tags e mais tags...
# title , nav, time, figure, tel, novos inputs, novos atributos data.
#Div
Papocou!
Comportamento dos browsers!
Ajuda do modernizer...
http://modernizr.com/
Seja amigo do back-end
Somos amigos, amigos do peito, amigos de vocês...
Novas API's
Acessando via javascript... “Luque aqui”.
Multimedia
Você pode acessar, controlar e manipular dados de
linha do tempo e estados de rede dos arquivos. Com
os futuros acréscimos às APIs você poderá ler e
gravar dados brutos em arquivos de áudio (API
Audio Data) ou manipular legendas em vídeos (API
Timed Track). Porém, o verdadeiro poder desses
novos elementos HTML aparece quando eles são
combinados com outras tecnologias do web stack,
seja Canvas, SVG, CSS ou mesmo WebGL.
3D, Graphics & Effects
Com a adição de tecnologias como o elemento
canvas, Web GL e imagens SVG, não é mais assim!
Na verdade, existem muitos novos recursos que lidam
com gráficos na web: Canvas 2D, WebGL, SVG,
transformações CSS 3D e SMIL.
Offline & Storage
“Web apps" podem ser inicializados de forma mais
rápida e funcionar mesmo sem conexão com a
internet, graças ao HTML5 app Cache, além das
especificações de Local Storage, Indexed DB e
File API.
PERFORMANCE & INTEGRATION
Deixe seu Web App e o conteúdo dinâmico da web
mais rápido com várias técnicas e tecnologias,
como Web Workers e XMLHttpRequest 2.
Nenhum usuário deveria esperar por você!
Conectivity
Conectividade mais eficiente significa mais chats
em tempo real, jogos mais rápidos e melhor
comunicação. Web sockets e Eventos enviados pelo
servidor estão empurrando (pushing) dados entre o
cliente e o servidor de forma mais eficiente do que
nunca.
Device Access
Com a API de geolocalização os Web Apps podem
ter experiências e diferenciais ricos, independete do
dispositivo.
Inovações incríveis em acesso aos dispositivos
estão sendo desenvolvidas: de áudio e vomo meio
de entrada de dados até dados locais!
CSS3
Deixando tudo lindão!
Antigamente...(ontem)

#CSS
Css só servia para pintar quadrado...
Hoje com CSS3...
Agora nós somos os “gostosões da web”.
Super poderes...
Animações - Transition, animation, keyframes!
Super poderes...
Animações - Transition, animation, keyframes!
Sombras – Em elementos e textos..
Super poderes...
Animações - Transition, animation, keyframes!
Sombras – Em elementos e textos.
Gradientes – Agora vai!
Super poderes...
Animações - Transition, animation, keyframes!
Sombras – Em elementos e textos.
Gradientes – Agora vai!
Media queries – Pensando no usuário...
3D com CSS?
Urih cumpadi!
Quem ganha com tudo isso?
Deixamos de ver isso....
Deixamos de ver isso....
Deixamos de ver isso....
E começamos a ver isso....
E começamos a ver isso....
E começamos a ver isso....
Então o Html5 é o futuro da internet?
“Espero que vocês não sejam medrosos e abusem da Plataforma
Aberta da Web. Só assim a tecnologia vai avançar e atingir a todos
igualmente e democraticamente. Plante a coragem de ter coragem
e não o medo que torna as pessoas reféns.”
Clécio Bachini / IMASTER
E o Html5?

Quero saber se é ou não o futuro da internet...
“O futuro da Internet está nas pessoas, na experiência que elas tem.
Não adianta nada usar qualquer tecnologia top de linha, se elas não tem boa
experiência com o seu projeto. HTML5 tá ai para mostrar toda sua magia,
graças as pessoas...”

Edmo Jeová
Referências:
Diego Eis (Locaweb) - http://tableless.com.br/
Daniel Filho (BrasilJS / Netshoes) - http://zofe.com.br/
Zeno Rocha (BrasilJS / Zofe) - http://zenorocha.com/
Bernard de Luna (COW / BrasilJS ) - http://bernarddeluna.com/

Livros:
HTML5 e CSS3: Domine a web do futuro
futuro.
Lucas Mazza (Casa do Codigo)
HTML5: A linguagem de marcação que revolucionou a web.
Maujor (Maurício Samy Silva) (http://www.maujor.com/)
CSS3 - Desenvolva aplicações web profissionais com o uso
dos poderosos recursos de estilização das CSS3.
CSS3
Maujor (Maurício Samy Silva) (http://www.maujor.com/)
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.

Mais conteúdo relacionado

Mais procurados

JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisJavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisWilliam Oliveira
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endDiego Eis
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDiego Eis
 
WordCamp Fortaleza 2016 - Vinícius Lourenço | tAPIoca com WooCommerce
WordCamp Fortaleza 2016 - Vinícius Lourenço | tAPIoca com WooCommerceWordCamp Fortaleza 2016 - Vinícius Lourenço | tAPIoca com WooCommerce
WordCamp Fortaleza 2016 - Vinícius Lourenço | tAPIoca com WooCommerceVinícius Lourenço
 
FISL17 - Vinícius Lourenço | WordPress - Como começar e o que dá para ser feito?
FISL17 - Vinícius Lourenço | WordPress - Como começar e o que dá para ser feito?FISL17 - Vinícius Lourenço | WordPress - Como começar e o que dá para ser feito?
FISL17 - Vinícius Lourenço | WordPress - Como começar e o que dá para ser feito?Vinícius Lourenço
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignGustavo Zimmermann
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Sérgio Vilar
 
Springpoint São Paulo 2016 - Vinícius Lourenço | WordPress for Dummies
Springpoint São Paulo 2016 - Vinícius Lourenço | WordPress for DummiesSpringpoint São Paulo 2016 - Vinícius Lourenço | WordPress for Dummies
Springpoint São Paulo 2016 - Vinícius Lourenço | WordPress for DummiesVinícius Lourenço
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignDiego Eis
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignGustavo Zimmermann
 
Introdução ao WordPress
Introdução ao WordPressIntrodução ao WordPress
Introdução ao WordPressTales Augusto
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSSDiego Eis
 
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-endComo encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-endJean Carlo Emer
 
Dicas e truques para desenvolver projetos web utilizando WordPress
Dicas e truques para desenvolver projetos web utilizando WordPressDicas e truques para desenvolver projetos web utilizando WordPress
Dicas e truques para desenvolver projetos web utilizando WordPressLeo Baiano
 
Quero me tornar desenvolvedor php. Como me preparar para entrar e me manter n...
Quero me tornar desenvolvedor php. Como me preparar para entrar e me manter n...Quero me tornar desenvolvedor php. Como me preparar para entrar e me manter n...
Quero me tornar desenvolvedor php. Como me preparar para entrar e me manter n...Leonam Pereira Dias
 
CMS Livres Gestao de conhecimento para web
CMS Livres   Gestao de conhecimento para webCMS Livres   Gestao de conhecimento para web
CMS Livres Gestao de conhecimento para webPaulino Michelazzo
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Cristofer Sousa
 

Mais procurados (20)

JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisJavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
 
It's Javascript Time
It's Javascript TimeIt's Javascript Time
It's Javascript Time
 
WordCamp Fortaleza 2016 - Vinícius Lourenço | tAPIoca com WooCommerce
WordCamp Fortaleza 2016 - Vinícius Lourenço | tAPIoca com WooCommerceWordCamp Fortaleza 2016 - Vinícius Lourenço | tAPIoca com WooCommerce
WordCamp Fortaleza 2016 - Vinícius Lourenço | tAPIoca com WooCommerce
 
FISL17 - Vinícius Lourenço | WordPress - Como começar e o que dá para ser feito?
FISL17 - Vinícius Lourenço | WordPress - Como começar e o que dá para ser feito?FISL17 - Vinícius Lourenço | WordPress - Como começar e o que dá para ser feito?
FISL17 - Vinícius Lourenço | WordPress - Como começar e o que dá para ser feito?
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
Springpoint São Paulo 2016 - Vinícius Lourenço | WordPress for Dummies
Springpoint São Paulo 2016 - Vinícius Lourenço | WordPress for DummiesSpringpoint São Paulo 2016 - Vinícius Lourenço | WordPress for Dummies
Springpoint São Paulo 2016 - Vinícius Lourenço | WordPress for Dummies
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 
Wordpress é blog
Wordpress é blogWordpress é blog
Wordpress é blog
 
Case Editora Abril
Case Editora AbrilCase Editora Abril
Case Editora Abril
 
Introdução ao WordPress
Introdução ao WordPressIntrodução ao WordPress
Introdução ao WordPress
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-endComo encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
 
Dicas e truques para desenvolver projetos web utilizando WordPress
Dicas e truques para desenvolver projetos web utilizando WordPressDicas e truques para desenvolver projetos web utilizando WordPress
Dicas e truques para desenvolver projetos web utilizando WordPress
 
Quero me tornar desenvolvedor php. Como me preparar para entrar e me manter n...
Quero me tornar desenvolvedor php. Como me preparar para entrar e me manter n...Quero me tornar desenvolvedor php. Como me preparar para entrar e me manter n...
Quero me tornar desenvolvedor php. Como me preparar para entrar e me manter n...
 
CMS Livres Gestao de conhecimento para web
CMS Livres   Gestao de conhecimento para webCMS Livres   Gestao de conhecimento para web
CMS Livres Gestao de conhecimento para web
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 

Destaque

Mercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoMercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoRodrigo Nogueira
 
Front-end Development
Front-end DevelopmentFront-end Development
Front-end DevelopmentEdy Segura
 
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endAnderson Aguiar
 
Os mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-endOs mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-endZeno Rocha
 
Evoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJSEvoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJSRodrigo Branas
 
AngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideAngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideSergio Azevedo
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroEduardo Shiota Yasuda
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSRodrigo Branas
 
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAWilson Mendes
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Rodrigo Branas
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UXEdu Agni
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
 
A (r)evolução do front-end
A (r)evolução do front-endA (r)evolução do front-end
A (r)evolução do front-endMarlos Carmo
 

Destaque (15)

Mercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundoMercado Front-End no Brasil e no mundo
Mercado Front-End no Brasil e no mundo
 
Front-end Development
Front-end DevelopmentFront-end Development
Front-end Development
 
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-end
 
SEO para Front-End
SEO para Front-EndSEO para Front-End
SEO para Front-End
 
Os mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-endOs mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-end
 
Evoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJSEvoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJS
 
AngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideAngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-Side
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJS
 
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
 
A (r)evolução do front-end
A (r)evolução do front-endA (r)evolução do front-end
A (r)evolução do front-end
 

Semelhante a Html5,css3,javascript o lugar onde sonhos se tornam realidade.

Big Data Week São Paulo 2017
Big Data Week São Paulo 2017 Big Data Week São Paulo 2017
Big Data Week São Paulo 2017 Thiago Santiago
 
HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?Diego Santos
 
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São GabrielMinicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São GabrielMarcelo Linhares
 
O que exatamente é a internet slides
O que exatamente é a internet slidesO que exatamente é a internet slides
O que exatamente é a internet slidessoniabiaggi
 
Comunicação em tempo real com WebRTC e PHP
Comunicação em tempo real com WebRTC e PHPComunicação em tempo real com WebRTC e PHP
Comunicação em tempo real com WebRTC e PHPMichael Douglas
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3CELULA CURSOS
 
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info
 
Cloud Computing - Palestra de Silvio Meira no Road Show da Amazon Web Services
Cloud Computing - Palestra de Silvio Meira no Road Show da Amazon Web ServicesCloud Computing - Palestra de Silvio Meira no Road Show da Amazon Web Services
Cloud Computing - Palestra de Silvio Meira no Road Show da Amazon Web Servicesitroads
 
Internet das coisas, machine learnign e maquinas de doces
Internet das coisas, machine learnign e maquinas de doces Internet das coisas, machine learnign e maquinas de doces
Internet das coisas, machine learnign e maquinas de doces Alvaro Viebrantz
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webigorpimentel
 
Cloud computing, web semântica e internet de coisas: dados e utilização
Cloud computing, web semântica e internet de coisas: dados e utilizaçãoCloud computing, web semântica e internet de coisas: dados e utilização
Cloud computing, web semântica e internet de coisas: dados e utilizaçãoVanissa Wanick
 
Palestra de Silverlight no DevBrasil Summit 11
Palestra de Silverlight no DevBrasil Summit 11Palestra de Silverlight no DevBrasil Summit 11
Palestra de Silverlight no DevBrasil Summit 11Anderson Sa
 
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloWorkshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloTchelinux
 

Semelhante a Html5,css3,javascript o lugar onde sonhos se tornam realidade. (20)

HTML5
HTML5HTML5
HTML5
 
Big Data Week São Paulo 2017
Big Data Week São Paulo 2017 Big Data Week São Paulo 2017
Big Data Week São Paulo 2017
 
HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?
 
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São GabrielMinicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
 
intercon2006
intercon2006intercon2006
intercon2006
 
O que exatamente é a internet slides
O que exatamente é a internet slidesO que exatamente é a internet slides
O que exatamente é a internet slides
 
Comunicação em tempo real com WebRTC e PHP
Comunicação em tempo real com WebRTC e PHPComunicação em tempo real com WebRTC e PHP
Comunicação em tempo real com WebRTC e PHP
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3
 
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
 
Cloud Computing - Palestra de Silvio Meira no Road Show da Amazon Web Services
Cloud Computing - Palestra de Silvio Meira no Road Show da Amazon Web ServicesCloud Computing - Palestra de Silvio Meira no Road Show da Amazon Web Services
Cloud Computing - Palestra de Silvio Meira no Road Show da Amazon Web Services
 
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
 
Apostila webdesign
Apostila webdesignApostila webdesign
Apostila webdesign
 
Aula 07 - Web
Aula 07 - WebAula 07 - Web
Aula 07 - Web
 
Web_2.0 Web Standards Web Semântica
Web_2.0 Web Standards Web SemânticaWeb_2.0 Web Standards Web Semântica
Web_2.0 Web Standards Web Semântica
 
Internet das coisas, machine learnign e maquinas de doces
Internet das coisas, machine learnign e maquinas de doces Internet das coisas, machine learnign e maquinas de doces
Internet das coisas, machine learnign e maquinas de doces
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
Cloud computing, web semântica e internet de coisas: dados e utilização
Cloud computing, web semântica e internet de coisas: dados e utilizaçãoCloud computing, web semântica e internet de coisas: dados e utilização
Cloud computing, web semântica e internet de coisas: dados e utilização
 
Palestra de Silverlight no DevBrasil Summit 11
Palestra de Silverlight no DevBrasil Summit 11Palestra de Silverlight no DevBrasil Summit 11
Palestra de Silverlight no DevBrasil Summit 11
 
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloWorkshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
 

Html5,css3,javascript o lugar onde sonhos se tornam realidade.

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6. HTML5 Dando uma repaginada no “negócio”.
  • 7. HTML5 É TOP NA BALADA! O que realmente é html5?
  • 8.
  • 9. Semantics Dando significado as coisas, é a grande mudança que o html5 nos traz. Introdução de tags que melhoram a compreensão do código para o browser, leitores e robôs.
  • 10.
  • 11.
  • 12. Tags e mais tags... # title , nav, time, figure, tel, novos inputs, novos atributos data.
  • 14. Comportamento dos browsers! Ajuda do modernizer... http://modernizr.com/
  • 15. Seja amigo do back-end Somos amigos, amigos do peito, amigos de vocês...
  • 16. Novas API's Acessando via javascript... “Luque aqui”.
  • 17. Multimedia Você pode acessar, controlar e manipular dados de linha do tempo e estados de rede dos arquivos. Com os futuros acréscimos às APIs você poderá ler e gravar dados brutos em arquivos de áudio (API Audio Data) ou manipular legendas em vídeos (API Timed Track). Porém, o verdadeiro poder desses novos elementos HTML aparece quando eles são combinados com outras tecnologias do web stack, seja Canvas, SVG, CSS ou mesmo WebGL.
  • 18. 3D, Graphics & Effects Com a adição de tecnologias como o elemento canvas, Web GL e imagens SVG, não é mais assim! Na verdade, existem muitos novos recursos que lidam com gráficos na web: Canvas 2D, WebGL, SVG, transformações CSS 3D e SMIL.
  • 19. Offline & Storage “Web apps" podem ser inicializados de forma mais rápida e funcionar mesmo sem conexão com a internet, graças ao HTML5 app Cache, além das especificações de Local Storage, Indexed DB e File API.
  • 20. PERFORMANCE & INTEGRATION Deixe seu Web App e o conteúdo dinâmico da web mais rápido com várias técnicas e tecnologias, como Web Workers e XMLHttpRequest 2. Nenhum usuário deveria esperar por você!
  • 21. Conectivity Conectividade mais eficiente significa mais chats em tempo real, jogos mais rápidos e melhor comunicação. Web sockets e Eventos enviados pelo servidor estão empurrando (pushing) dados entre o cliente e o servidor de forma mais eficiente do que nunca.
  • 22. Device Access Com a API de geolocalização os Web Apps podem ter experiências e diferenciais ricos, independete do dispositivo. Inovações incríveis em acesso aos dispositivos estão sendo desenvolvidas: de áudio e vomo meio de entrada de dados até dados locais!
  • 23.
  • 25. Antigamente...(ontem) #CSS Css só servia para pintar quadrado...
  • 26. Hoje com CSS3... Agora nós somos os “gostosões da web”.
  • 27. Super poderes... Animações - Transition, animation, keyframes!
  • 28. Super poderes... Animações - Transition, animation, keyframes! Sombras – Em elementos e textos..
  • 29. Super poderes... Animações - Transition, animation, keyframes! Sombras – Em elementos e textos. Gradientes – Agora vai!
  • 30. Super poderes... Animações - Transition, animation, keyframes! Sombras – Em elementos e textos. Gradientes – Agora vai! Media queries – Pensando no usuário...
  • 31. 3D com CSS? Urih cumpadi!
  • 32. Quem ganha com tudo isso?
  • 33.
  • 34. Deixamos de ver isso....
  • 35. Deixamos de ver isso....
  • 36. Deixamos de ver isso....
  • 37. E começamos a ver isso....
  • 38. E começamos a ver isso....
  • 39. E começamos a ver isso....
  • 40. Então o Html5 é o futuro da internet?
  • 41.
  • 42.
  • 43.
  • 44. “Espero que vocês não sejam medrosos e abusem da Plataforma Aberta da Web. Só assim a tecnologia vai avançar e atingir a todos igualmente e democraticamente. Plante a coragem de ter coragem e não o medo que torna as pessoas reféns.” Clécio Bachini / IMASTER
  • 45. E o Html5? Quero saber se é ou não o futuro da internet...
  • 46. “O futuro da Internet está nas pessoas, na experiência que elas tem. Não adianta nada usar qualquer tecnologia top de linha, se elas não tem boa experiência com o seu projeto. HTML5 tá ai para mostrar toda sua magia, graças as pessoas...” Edmo Jeová
  • 47. Referências: Diego Eis (Locaweb) - http://tableless.com.br/ Daniel Filho (BrasilJS / Netshoes) - http://zofe.com.br/ Zeno Rocha (BrasilJS / Zofe) - http://zenorocha.com/ Bernard de Luna (COW / BrasilJS ) - http://bernarddeluna.com/ Livros: HTML5 e CSS3: Domine a web do futuro futuro. Lucas Mazza (Casa do Codigo) HTML5: A linguagem de marcação que revolucionou a web. Maujor (Maurício Samy Silva) (http://www.maujor.com/) CSS3 - Desenvolva aplicações web profissionais com o uso dos poderosos recursos de estilização das CSS3. CSS3 Maujor (Maurício Samy Silva) (http://www.maujor.com/)