O documento discute as principais tecnologias da especificação HTML5, incluindo semântica, armazenamento offline, acesso a dispositivos, conectividade, gráficos vetoriais (SVG), desenho 2D (Canvas), renderização 3D (WebGL) e semântica para tornar os dados da web mais compreensíveis para máquinas.
Como implementar Rich Snippets - Thought WorksLuiz Almeida
Apresentação feita para a equipe de produto e UX design da Thought Works.
Resumo de melhores práticas para a implementação dos Rich Snippets nos resultados de busca orgânica (SEO) das ferramentas de busca como Google, Bing e Yahoo.
Todas as práticas são baseadas nas regras do Schema.org e validadas dentro dos buscadores.
Existem mais de 750 tipos de rich snippets disponíveis no mercado, mas a implementação e benefícios é igual para todos.
Basta escolher os mais releantes para o seu site.
Palestra que apresentei no FISL, para dúvidas, criticas ou sugestões enviem emails para FISL AT urubatan DOT com DOT br.
Todos os comentários são bem vindos.
Na palestra falo bastante sobre PhoneGap e um pouco sobre Titanium Mobile.
O navegador está cada vez mais sensível ao seus arredores. Explorando todos os novos sensores disponíveis no HTML5 – acelerômetro, geolocalização, câmera e microfone – vamos acessar todas as APIs do aqui e do além.
Slides do mini-curso ministrado durante a SECCOMP 2010 (XVIII Semana da Ciência da Computação) no campus de Rio Claro da UNESP, na qual alunos de Ciência da Computação foram apresentados ao universo da criação de mashups, viram alguns cases e tecnologias relacionadas e fizeram exercícios usando Yahoo! Pipes (para integrar feeds RSS) e JavaScript (integrando a Apontador API com o Google Maps).
Como implementar Rich Snippets - Thought WorksLuiz Almeida
Apresentação feita para a equipe de produto e UX design da Thought Works.
Resumo de melhores práticas para a implementação dos Rich Snippets nos resultados de busca orgânica (SEO) das ferramentas de busca como Google, Bing e Yahoo.
Todas as práticas são baseadas nas regras do Schema.org e validadas dentro dos buscadores.
Existem mais de 750 tipos de rich snippets disponíveis no mercado, mas a implementação e benefícios é igual para todos.
Basta escolher os mais releantes para o seu site.
Palestra que apresentei no FISL, para dúvidas, criticas ou sugestões enviem emails para FISL AT urubatan DOT com DOT br.
Todos os comentários são bem vindos.
Na palestra falo bastante sobre PhoneGap e um pouco sobre Titanium Mobile.
O navegador está cada vez mais sensível ao seus arredores. Explorando todos os novos sensores disponíveis no HTML5 – acelerômetro, geolocalização, câmera e microfone – vamos acessar todas as APIs do aqui e do além.
Slides do mini-curso ministrado durante a SECCOMP 2010 (XVIII Semana da Ciência da Computação) no campus de Rio Claro da UNESP, na qual alunos de Ciência da Computação foram apresentados ao universo da criação de mashups, viram alguns cases e tecnologias relacionadas e fizeram exercícios usando Yahoo! Pipes (para integrar feeds RSS) e JavaScript (integrando a Apontador API com o Google Maps).
Arquitetura JavaScript Escalável da NetflixBruno Tavares
E se ao invés de usar classes, instâncias, camadas e MVC nós voltarmos aos fundamentos do JavaScript e construir aplicações inteiras somente com funções?
Slides da palestra sobre a arquitetura da Netflix, demonstrando como nós usamos Componentes Funcionais e React para construir nossas aplicações.
Apresentada no TDC Porto Alegre 2016.
Vídeo e mais informações em http://bruno.tavares.me
A construção de interfaces ricas na web podem ser menos traumáticas, essa é a premissa básica desse framework. Nessa palestra faleremos sobre a introdução ao uso do Angular JS e o seu funcionamento, explicando as abstrações e magias que tornam o framework mais produtivo.
The importance of the correct use of colors, accessibility, contrast, color theory, and how to handle correctly these 256 levels of red, green and blue for a better user experience on the web.
Arquitetura JavaScript Escalável da NetflixBruno Tavares
E se ao invés de usar classes, instâncias, camadas e MVC nós voltarmos aos fundamentos do JavaScript e construir aplicações inteiras somente com funções?
Slides da palestra sobre a arquitetura da Netflix, demonstrando como nós usamos Componentes Funcionais e React para construir nossas aplicações.
Apresentada no TDC Porto Alegre 2016.
Vídeo e mais informações em http://bruno.tavares.me
A construção de interfaces ricas na web podem ser menos traumáticas, essa é a premissa básica desse framework. Nessa palestra faleremos sobre a introdução ao uso do Angular JS e o seu funcionamento, explicando as abstrações e magias que tornam o framework mais produtivo.
The importance of the correct use of colors, accessibility, contrast, color theory, and how to handle correctly these 256 levels of red, green and blue for a better user experience on the web.
Partindo do ontem com layouts em tabelas e passando pelo hoje com o box model, iremos explorar as limitações dessas abordagens para entender o que as novas técnicas do depois – flexbox, grids, regions e exclusions – vêm a solucionar.
90. // fazendo uma requisição
navigator.geolocation.getCurrentPosition( showMap )
// função callback
function showMap( position ){
// aqui podemos mostrar o mapa com os
// dados de position
}
112. <div>
<h1>Avatar</h1>
<p>
Diretor:
<span>James Cameron</span>
<span>(16 de agosto de 1954)</span>
</p>
<span>Ficção Científica</span>
<a href="../movies/trailer.html">
Trailer
</a>
</div>
113. <div itemscope itemtype="http://schema.org/Movie">
<h1>Avatar</h1>
<p>
Diretor:
<span>James Cameron</span>
<span>(16 de agosto de 1954)</span>
</p>
<span>Ficção Científica</span>
<a href="../movies/trailer.html">
Trailer
</a>
</div>
114. <div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<p>
Diretor:
<span>James Cameron</span>
<span>(16 de agosto de 1954)</span>
</p>
<span>Ficção Científica</span>
<a href="../movies/trailer.html">
Trailer
</a>
</div>
115. <div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<p>
Diretor:
<span itemprop="director">James Cameron</span>
<span>(16 de agosto de 1954)</span>
</p>
<span>Ficção Científica</span>
<a href="../movies/trailer.html">
Trailer
</a>
</div>
116. <div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<p>
Diretor:
<span itemprop="director">James Cameron</span>
<span>(16 de agosto de 1954)</span>
</p>
<span itemprop="genre">Ficção Científica</span>
<a href="../movies/trailer.html">
Trailer
</a>
</div>
117. <div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<p>
Diretor:
<span itemprop="director">James Cameron</span>
<span>(16 de agosto de 1954)</span>
</p>
<span itemprop="genre">Ficção Científica</span>
<a href="../movies/trailer.html" itemprop="trailer">
Trailer
</a>
</div>
118. avatar
filme
ficção
científica
james
cameron
<a>
nome
gênero trailer
diretor
119. <div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<p>
Diretor:
<span itemprop="director">James Cameron</span>
<span>(16 de agosto de 1954)</span>
</p>
<span itemprop="genre">Ficção Científica</span>
<a href="../movies/trailer.html" itemprop="trailer">
Trailer
</a>
</div>
120. <div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<p itemprop="director">
Diretor:
<span>James Cameron</span>
<span>(16 de agosto de 1954)</span>
</p>
<span itemprop="genre">Ficção Científica</span>
<a href="../movies/trailer.html" itemprop="trailer">
Trailer
</a>
</div>
121. <div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<p itemprop="director"
itemscope>
Diretor:
<span>James Cameron</span>
<span>(16 de agosto de 1954)</span>
</p>
<span itemprop="genre">Ficção Científica</span>
<a href="../movies/trailer.html" itemprop="trailer">
Trailer
</a>
</div>
122. <div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<p itemprop="director"
itemscope
itemtype="http://schema.org/Person">
Diretor:
<span>James Cameron</span>
<span>(16 de agosto de 1954)</span>
</p>
<span itemprop="genre">Ficção Científica</span>
<a href="../movies/trailer.html" itemprop="trailer">
Trailer
</a>
</div>
123. <div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<p itemprop="director"
itemscope
itemtype="http://schema.org/Person">
Diretor:
<span itemprop="name">James Cameron</span>
<span>(16 de agosto de 1954)</span>
</p>
<span itemprop="genre">Ficção Científica</span>
<a href="../movies/trailer.html" itemprop="trailer">
Trailer
</a>
</div>
124. <div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<p itemprop="director"
itemscope
itemtype="http://schema.org/Person">
Diretor:
<span itemprop="name">James Cameron</span>
<span itemprop="birthDate">(16 de agosto de 1954)</span>
</p>
<span itemprop="genre">Ficção Científica</span>
<a href="../movies/trailer.html" itemprop="trailer">
Trailer
</a>
</div>
125. avatar
filme
ficção
científica
pessoa
<a>
nome
gênero trailer
diretor
james
cameron
16 de
agosto de
1954
nome data de
nascimento
126.
127. filme
empresas
receita
pintura
pessoa
artigo
seriado de TV
evento
loja
aeroporto
playground
vulcão
atração turística
templo hindu
escultura
parada de ônibus
petshop
dentista
eletricista
padaria
energia
música
livro
150. navegador
servidor
http polling
requisição 1
resposta 1
requisição 2
resposta 2
requisição n
resposta n
151. web socket
// inicia conexão
var conexao = new WebSocket(socketUrl)
// evento disparado sempre que
// o server envia mensagens
conexao.onmessage = function(event) {
console.log('Server: ' + event.data)
}
// envia uma msg para o server
conexao.send('Sup?')
164. aplicações
• jogos online multiplayer
• timeline de redes sociais
• chat
165. “reduzir kilobytes de dados
para 2 bytes...e reduzir a
latência de 150ms para 50ms é
muito mais que um simples
detalhe. na verdade, estes
fatores sozinhos já são
suficientes para fazer com que
o web socket se torne muito
interessante ao google.”
- ian hickson