road show ti senac são paulo - jaú
DESCRIPTION
Palestra ministrada em Jaú sobre HTML5 / Open Web Platform no Road Show TI do Senac 2012TRANSCRIPT
![Page 1: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/1.jpg)
HTML 5
![Page 2: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/2.jpg)
soyuz.com.br
![Page 3: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/3.jpg)
HTML5 A nova fronteira no projeto de aplicações
WEB
soyuz.com.br
![Page 4: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/4.jpg)
Clécio Bachini
Bacharel em Ciências da Computação
Fundador e Diretor de Pesquisa e Desenvolvimento da
Soyuz Sistemas
No mercado WEB desde 1997.
Foi professor de Web Standards e GNU/Linux no Centro Paula Souza.
Palestrante em eventos como WebExpo Forum, Front In Londrina e em Universidades como Fatec e Cruzeiro do Sul.
Certificado em HTML5 pelo W3C escritório Brasil.
soyuz.com.br
![Page 5: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/5.jpg)
Conexões
@cbachini
slideshare.net/cbachini
klout.com/#/cbachini
linkedin.com/in/cbachini
soyuz.com.br
![Page 6: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/6.jpg)
Pra começo de conversa
Design é Projeto | Draw é Desenho
soyuz.com.br
![Page 7: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/7.jpg)
INTRO
O HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido por Tim Berners-Lee nos anos 1990
soyuz.com.br
![Page 8: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/8.jpg)
WEB
Arquitetura cliente < > servidor
Modelo de localização universal URL - Uniform Resource Locator
Protocolo de comunicação HTTP - Hypertext Transfer Protocol
Linguagem de marcação HTML - HyperText Markup Language
Documento estruturado na forma de hipertexto
Browser (navegador) como recurso de visualização do documento pelo cliente
soyuz.com.br
![Page 9: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/9.jpg)
Client Side
A organização do desenvolvimento de projetos web em camadas independentes confere flexibilidade e modularidade ao fluxo de trabalho para web integrando equipes multidisciplinares de planejamento, produção, arquitetura da informação, design e programação.
soyuz.com.br
Marcação HTML
Apresentação CSS
Comportamento JavaScript
![Page 10: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/10.jpg)
HTML
soyuz.com.br
1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless
2005 AJAX
2009 HTML 5
![Page 11: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/11.jpg)
HTML5
O HTML 5 é especificação do W3C, ainda não concluída, que deve ser candidata a uma recomendação em 2012.
Pelas características modulares do seu desenvolvimento, as empresas, fabricantes dos navegadores, desenvolvedores, designers e usuários não necessitam aguardar a especificação final da linguagem para colocá-la em uso.
Esta nova especificação introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrões compatíveis com todos dispositivos, na marcação semântica do código, na manipulação de elementos do CSS e do JavaScript através da definição de APIs da arquitetura Web.
World Wide Web Consortium - Escritório Brasil http://www.w3c.br
soyuz.com.br
![Page 12: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/12.jpg)
APIs
O HTML 5 aceita um conjunto de APIs que fortalece, integra e valoriza a camada de desenvolvimento do lado do usuário (client side) através de aplicações que permitem geolocalização, controle de áudio e vídeo, arrastar componentes (drag & drop), desenhar bitmaps (canvas), criar aplicações offline e outras.
soyuz.com.br
Marcação
APIs HTML
Apresentação CSS
Comportamento JavaScript
![Page 13: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/13.jpg)
APIs
O HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido por Tim Berners-Lee nos anos 1990
soyuz.com.br
HTML5 HTML CSS APIs + JS
![Page 14: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/14.jpg)
Compatibilidade
Renderização dos browsers
A cada nova versão mais recursos são suportados e a concorrência entre os fabricantes é grande de maneira que quando um fabricante implementa uma funcionalidade é quase sempre seguido de perto pelos demais.
soyuz.com.br
Motor Browsers
Gecko Firefox, SeaMonkey, Camino, K-Meleon
Presto Opera, Opera Mobile, Nintendo Wii, Nintendo DS e DSi
Trident Internet Explorer
WebKit Chrome, Safari (incluindo iPhones e iPads), Adobe AIR,
Android, Palm webOS, Symbian
![Page 15: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/15.jpg)
Compatibilidade
http://html5test.com Testa e avalia a compatibilidade do seu browser com os elementos específicos do HTML5 http://html5readiness.com Mostra como o suporte ao HTML5 evoluiu de 2008 até hoje http://caniuse.com Exibe tabelas de compatibilidade para recursos de HTML5, CSS3, SVG e outras tecnologias web http://fmbip.com Exibe tabelas de compatibilidade sobre seu browser
soyuz.com.br
![Page 16: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/16.jpg)
Compatibilidade
<head>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
O script acima é de Remy Sharp e está hospedado no Google Project Hosting .Você pode usá-lo livremente em seus projetos.
http://modernizr.com/ Bibioteca que introduz elementos de teste e compatibilidde por meio de JavaScript.
soyuz.com.br
![Page 17: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/17.jpg)
NOVIDADES A simplicidade é o último grau de sofisticação
soyuz.com.br
![Page 18: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/18.jpg)
Doctype
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5
<!DOCTYPE html>
soyuz.com.br
![Page 19: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/19.jpg)
Charset
HTML 4.01
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
XHTML 1.0
<?xml version="1.0" encoding="UTF-8"?>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
HTML5
<meta charset="utf-8">
soyuz.com.br
![Page 20: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/20.jpg)
Estrutura básica
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Estrutura básica</title>
</head>
<body>
</body>
</html>
soyuz.com.br
![Page 21: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/21.jpg)
SEMÂNTICA Saber o significado das palavras é essencial para o entendimento!
soyuz.com.br
![Page 22: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/22.jpg)
Elementos estruturais
HTML4 / XHTML
<body>
<div id="topo"></div>
<div id="navegacao"></div>
<div id="principal"></div>
<div id="lateral"></div>
<div id="rodape"></div>
</body>
HTML5
<body>
<header></header>
<nav></nav>
<article></article>
<aside></aside>
<footer></footer>
</body>
soyuz.com.br
Umas das maiores novidades do HTML5 é a possibilidade de atribuir às diversas seções estuturais do documento um elemento próprio, nativo da linguagem.
![Page 23: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/23.jpg)
Formulários
<input type="email">
<input type="url">
<input type="number">
<input type="search">
<input type="range">
<input type="date">
<input type="week">
http://bit.ly/nrGXhw
soyuz.com.br
![Page 24: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/24.jpg)
MULTIMÍDIA O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.
soyuz.com.br
![Page 25: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/25.jpg)
Canvas
O elemento canvas,novidade do HTML 5, permite que a informação para a construção de imagens baseadas em pixels seja inserida diretamente no código do documento. O elemento canvas apenas delimita em que local da tela isto acontece. O processo de desenho é controlado por uma API específica para este elemento que interage com JavaScript.
<canvas id="figura" width="300" height="300"></canvas>
<button onClick="desenhar()">Desenhar</button>
<script>
function desenhar()
{ var desenho = document.getElementById('figura');
var context = desenho.getContext('2d');
context.fillStyle = '#00FFFF‘;
context.fillRect(50,50,200, 200); }
</script>
http://bit.ly/nK6JCx
soyuz.com.br
![Page 26: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/26.jpg)
SVG
<svg >
<rect width="90" height="60" x="10" y="100"
fill="#00FFCC" stroke="#FF0000" stroke-width="3" >
</svg>
No HTML5 o formato SVG (Scalable Vectorial Graphics) pode ser embutido diretamente embutido no documento com o uso do elemento img
<img src="imagens/rabisco.svg" alt="Rabisco em SVG">
canvas bitmap
svg vetor
http://bit.ly/rqqZuK
soyuz.com.br
![Page 27: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/27.jpg)
Áudio
<audio src="mozart_trompa.mp3" controls></audio>
Opção para vários formatos e opção de download do arquivo, visível quando o browser do usuário não oferecer suporte para nenhum dos formatos indicados ou para o elemento audio.
<audio controls>
<source src="mozart_trompa.aac"/>
<source src="mozart_trompa.ogg"/>
<source src="mozart_trompa.mp3"/>
<p>Baixe o arquivo<a href="mozart_trompa.mp3">.mp3</a></p>
</audio>
http://bit.ly/nDeClI
soyuz.com.br
![Page 28: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/28.jpg)
Vídeo
A compatibilidade dos browsers ainda é problemática, mas existem várias maneiras de contornar esta questão como, por exemplo, usar formatos alternativos, indicar um link para download e incluir o uso do Flash Player para a reprodução do vídeo.
<video height="272" width="360" controls preload poster=“poster_video.jpg">
<source src="videos/video.m4v"/>
<source src="videos/video.ogv"/>
<source src="videos/video.webm"/>
<p><a href="videos/video.m4v">Baixe o vídeo</a></p></video>
http://bit.ly/oKtdlT
soyuz.com.br
Container Vídeo Áudio Suporte
MPEG4 H.264 AAC Chrome, Safari, IE9
OGG Theora Vorbis Chrome, Firefox, Opera
WebM VP8 Vorbis Chrome , Firefox, IE9, Opera
![Page 29: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/29.jpg)
APIS
O HTML não é uma linguagem de programação
soyuz.com.br
![Page 30: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/30.jpg)
APIs
“O HTML não é uma linguagem de programação”
Apesar desta afirmação soar estranha para muitos, sempre devemos lembrar de que o HTML é uma linguagem de marcação e de que sozinho ele não consegue formatar, manipular ou criar conteúdo.
APIs Demo
Web Storage http://slides.html5rocks.com/#web-storage
Drag & Drop http://slides.html5rocks.com/#drag-and-drop
Desktop Drag-In http://slides.html5rocks.com/#drag-in
Desktop Drag-Out http://slides.html5rocks.com/#drag-out
Geolocation http://slides.html5rocks.com/#geolocation
Device Orientation http://slides.html5rocks.com/#slide-orientation
Speech Input http://slides.html5rocks.com/#speech-input
![Page 31: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/31.jpg)
ESTILO
O estilo está sob as palavras como dentro delas. É igualmente a alma e a carne de uma obra
soyuz.com.br
![Page 32: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/32.jpg)
CSS3
@font-face Efeitos de texto Colunas Cor e transparência Bordas Transições Animações Media queries http://bit.ly/p4vtpS http://slides.html5rocks.com/#css3-title
soyuz.com.br
![Page 33: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/33.jpg)
WEB APPS
Mobile não é uma tecnologia é um estilo de vida
soyuz.com.br
![Page 34: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/34.jpg)
soyuz.com.br
![Page 35: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/35.jpg)
Aplicativos Mobile HTML5
Playboy
Financial Times
Zeewe
soyuz.com.br
![Page 36: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/36.jpg)
CASES Mudança do fluxo de traballho
soyuz.com.br
![Page 37: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/37.jpg)
HTML5 APPs
Soyuz Sistemas
Migração do fluxo de trabalho para produção de apresentações em HTML5 para Sistema UNO Internacional do Grupo Santillana / Editora Moderna
Envolvimento e treinamento da equipe
Designers | Developers
Do PSD ao CODE com semântica
Crossbrowser
Permite distribuição para iOS e Android
Permite empacotamento Adobe AIR (Webkit)
Base para produção de futura ferramenta colaborativa
soyuz.com.br
![Page 38: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/38.jpg)
WEB GL e Visualização de dados
Dashboard em tempo real
mostrando a relação entre latitude,
longitude e altura dos municípios
brasileiros.
Baseado em dados abertos, esta é
uma experiência de visualização de
dados utilizando Ajax e Processing.js
como mecanismo para o gráfico em
WebGL.
http://labs.soyuz.com.br/dash/
soyuz.com.br
![Page 39: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/39.jpg)
Mitos
• HTML5 ainda não pode ser usado comercialmente
• A maior mudança do HTML5 foi Vídeo, Áudio e Canvas
• Objetivo do HTML5 é matar o Flash
• HTML5 não faz diferença pra SEO/SEM
• HTML5 tem falhas graves de segurança
soyuz.com.br
![Page 40: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/40.jpg)
OPEN WEB PLATFORM soyuz.com.br
![Page 41: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/41.jpg)
LINKS E REFERÊNCIAS Você é o que você compartilha
soyuz.com.br
![Page 42: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/42.jpg)
Links e Referências
Soyuz Sistemas http://www.soyuz.com.br/
Livro HTML5 – Embarque Imediato
http://soyuz.com.br/html5/
HTML5 Doctor, helping you implement HTML5 today
http://html5doctor.com/
DIVE INTO HTML5
http://diveintohtml5.org/
HTML5: Edition for Web Authors
http://dev.w3.org/html5/spec-author-view/
W3C Brasil
http://www.w3c.br
Curso de HTML5 do W3C Brasil
http://www.w3c.br/Cursos/CursoHTML5
Stickman
http://www.drawastickman.com/
20 Lições - Google
http://www.20thingsilearned.com/pt-BR
soyuz.com.br
![Page 43: Road Show TI Senac São Paulo - Jaú](https://reader030.vdocuments.pub/reader030/viewer/2022020105/555e26a4d8b42a6a4c8b4f7f/html5/thumbnails/43.jpg)
PUBLICAÇÕES Fica a dica
soyuz.com.br