road show ti senac são paulo - jaú

46
HTML 5

Upload: clecio-bachini

Post on 22-May-2015

686 views

Category:

Technology


1 download

DESCRIPTION

Palestra ministrada em Jaú sobre HTML5 / Open Web Platform no Road Show TI do Senac 2012

TRANSCRIPT

Page 1: Road Show TI Senac São Paulo - Jaú

HTML 5

Page 2: Road Show TI Senac São Paulo - Jaú

soyuz.com.br

Page 3: Road Show TI Senac São Paulo - Jaú

HTML5 A nova fronteira no projeto de aplicações

WEB

soyuz.com.br

Page 4: Road Show TI Senac São Paulo - Jaú

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ú

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ú

Pra começo de conversa

Design é Projeto | Draw é Desenho

soyuz.com.br

Page 7: Road Show TI Senac São Paulo - Jaú

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ú

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ú

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ú

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ú

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ú

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ú

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ú

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ú

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ú

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ú

NOVIDADES A simplicidade é o último grau de sofisticação

soyuz.com.br

Page 18: Road Show TI Senac São Paulo - Jaú

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ú

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ú

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ú

SEMÂNTICA Saber o significado das palavras é essencial para o entendimento!

soyuz.com.br

Page 22: Road Show TI Senac São Paulo - Jaú

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ú

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ú

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ú

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ú

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ú

Á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ú

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ú

APIS

O HTML não é uma linguagem de programação

soyuz.com.br

Page 30: Road Show TI Senac São Paulo - Jaú

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ú

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ú

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ú

WEB APPS

Mobile não é uma tecnologia é um estilo de vida

soyuz.com.br

Page 34: Road Show TI Senac São Paulo - Jaú

soyuz.com.br

Page 35: Road Show TI Senac São Paulo - Jaú

Aplicativos Mobile HTML5

Playboy

Financial Times

Linkedin

Zeewe

soyuz.com.br

Page 36: Road Show TI Senac São Paulo - Jaú

CASES Mudança do fluxo de traballho

soyuz.com.br

Page 37: Road Show TI Senac São Paulo - Jaú

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ú

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ú

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ú

OPEN WEB PLATFORM soyuz.com.br

Page 41: Road Show TI Senac São Paulo - Jaú

LINKS E REFERÊNCIAS Você é o que você compartilha

soyuz.com.br

Page 42: Road Show TI Senac São Paulo - Jaú

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ú

PUBLICAÇÕES Fica a dica

soyuz.com.br

Page 44: Road Show TI Senac São Paulo - Jaú

Publicações

soyuz.com.br

“Jaba para

Fábio Flatschart”

Page 45: Road Show TI Senac São Paulo - Jaú

Novidades!

soyuz.com.br

http://www.facebook.com/Seofish

Page 46: Road Show TI Senac São Paulo - Jaú

Muito obrigado !

@cbachini

[email protected]

soyuz.com.br

soyuz.com.br