SlideShare uma empresa Scribd logo
1 de 46
Baixar para ler offline
HTML 5
Open Web Platform
          Jaboticabal
soyuz.com.br
HTML5
A nova fronteira no projeto de aplicações
                                     WEB




           soyuz.com.br
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
Conexões

@cbachini

slideshare.net/cbachini

klout.com/#/cbachini

linkedin.com/in/cbachini
       soyuz.com.br
Pra começo de conversa 




Design é Projeto | Draw é Desenho

            soyuz.com.br
O HTML5 não é uma ruptura, é a continuidade e evolução do modelo
concebido por Tim Berners-Lee nos anos 1990

INTRO


                              soyuz.com.br
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
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.



                 Marcação                                 HTML
              Apresentação                                  CSS
           Comportamento                               JavaScript



                                     soyuz.com.br
HTML
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


                          soyuz.com.br
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
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.



             Marcação                                             HTML
           Apresentação
          Comportamento
                                   APIs                             CSS
                                                                JavaScript




                                     soyuz.com.br
APIs
O HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido por
Tim Berners-Lee nos anos 1990




                      HTML5
            HTML                      CSS                  APIs + JS




                                    soyuz.com.br
Compatibilidade
Renderização dos browsers


    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

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
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
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.



http://br.html5boilerplate.com/
Framework com soluções de compatibilidade para HTML5.




                                                                           soyuz.com.br
A simplicidade é o último grau de sofisticação

NOVIDADES


                                soyuz.com.br
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
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
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
Saber o significado das palavras é essencial para o entendimento!

SEMÂNTICA


                                soyuz.com.br
Elementos estruturais
Umas das maiores novidades do HTML5 é a possibilidade de atribuir às diversas
seções estuturais do documento um elemento próprio, nativo da linguagem.

                      HTML4 / XHTML         HTML5
                              <body>        <body>
        <div id="topo"></div>               <header></header>
 <div id="navegacao"></div>                 <nav></nav>
 <div id="principal"></div>                 <article></article>
    <div id="lateral"></div>                <aside></aside>
     <div id="rodape"></div>                <footer></footer>
                            </body>         </body>


                                    soyuz.com.br
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
O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.

MULTIMÍDIA


                               soyuz.com.br
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
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
Á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
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


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
                                     soyuz.com.br
O HTML não é uma linguagem de programação

APIS


                            soyuz.com.br
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
O estilo está sob as palavras como dentro delas. É igualmente a alma e a
carne de uma obra

ESTILO


                                soyuz.com.br
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
Mobile não é uma tecnologia é um estilo de vida

WEB APPS


                               soyuz.com.br
soyuz.com.br
Aplicativos Mobile HTML5

Playboy


Financial Times


Linkedin


Zeewe

            soyuz.com.br
Mudança do fluxo de traballho

CASES


                                soyuz.com.br
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
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
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
OPEN WEB PLATFORM
      soyuz.com.br
Você é o que você compartilha 

LINKS E REFERÊNCIAS


                              soyuz.com.br
Soyuz Sistemas
                                                    Links e Referências
http://www.soyuz.com.br/

Livro HTML5 – Embarque Imediato
http://soyuz.com.br/html5/

Can I Use?
http://caniuse.com/

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
Fica a dica 

PUBLICAÇÕES


                soyuz.com.br
Publicações


                 “Jaba para
                 Fábio Flatschart”




soyuz.com.br
Novidades!




http://www.facebook.com/Seofish

           soyuz.com.br
Muito obrigado !




              @cbachini

              cbachini@gmail.com

              soyuz.com.br

      soyuz.com.br

Mais conteúdo relacionado

Mais procurados

Desenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nosDesenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nosVinicius Rocha Olivieri
 
Curriculo para Designer leonildo wagner - 08-2016
Curriculo para Designer  leonildo wagner - 08-2016 Curriculo para Designer  leonildo wagner - 08-2016
Curriculo para Designer leonildo wagner - 08-2016 Léo Dias
 
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
 
0 Introdução ao Desenvolvimento Web - Apresentação
0   Introdução ao Desenvolvimento Web - Apresentação0   Introdução ao Desenvolvimento Web - Apresentação
0 Introdução ao Desenvolvimento Web - ApresentaçãoMauro Duarte
 
CSS Básico para Webdesign
CSS Básico para WebdesignCSS Básico para Webdesign
CSS Básico para WebdesignRenato Melo
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - IntroduçãoVítor Teixeira
 
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...joselialcosta
 
Content Management System CMS: Wordpress
Content Management System CMS: WordpressContent Management System CMS: Wordpress
Content Management System CMS: Wordpressrenancavichi
 
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTAndré Luís
 
Curso web faveni aula 19 - Introdução a CMS
Curso web faveni aula 19 - Introdução a CMSCurso web faveni aula 19 - Introdução a CMS
Curso web faveni aula 19 - Introdução a CMSLuis Marcelo Zanlucki
 
Desvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoDesvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoUbiratan Z. do Nascimento
 
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
 
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011Reinaldo Ferraz
 
Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...
Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...
Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...jCursos
 

Mais procurados (20)

Desenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nosDesenvolvimento de sites com xhtml e css nos
Desenvolvimento de sites com xhtml e css nos
 
Curriculo para Designer leonildo wagner - 08-2016
Curriculo para Designer  leonildo wagner - 08-2016 Curriculo para Designer  leonildo wagner - 08-2016
Curriculo para Designer leonildo wagner - 08-2016
 
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
 
0 Introdução ao Desenvolvimento Web - Apresentação
0   Introdução ao Desenvolvimento Web - Apresentação0   Introdução ao Desenvolvimento Web - Apresentação
0 Introdução ao Desenvolvimento Web - Apresentação
 
CSS Básico para Webdesign
CSS Básico para WebdesignCSS Básico para Webdesign
CSS Básico para Webdesign
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Curso web faveni aula 27
Curso web faveni aula 27Curso web faveni aula 27
Curso web faveni aula 27
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - Introdução
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
 
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
 
Content Management System CMS: Wordpress
Content Management System CMS: WordpressContent Management System CMS: Wordpress
Content Management System CMS: Wordpress
 
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
 
Curso web faveni aula 19 - Introdução a CMS
Curso web faveni aula 19 - Introdução a CMSCurso web faveni aula 19 - Introdução a CMS
Curso web faveni aula 19 - Introdução a CMS
 
Desvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucessoDesvendando padrões para desenvolvimento web, base para o sucesso
Desvendando padrões para desenvolvimento web, base para o sucesso
 
HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?
 
Html5
Html5Html5
Html5
 
Profissão Front-end
Profissão Front-endProfissão Front-end
Profissão Front-end
 
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
 
Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...
Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...
Criação de sites Joomla com CCKs e frameworks de template - Joomla Day Ribeir...
 

Destaque

A Era Pós Devices - 7Masters - Mobile
A Era Pós Devices - 7Masters - Mobile A Era Pós Devices - 7Masters - Mobile
A Era Pós Devices - 7Masters - Mobile Clécio Bachini
 
7Masters Acessibilidade Web - iMasters
7Masters Acessibilidade Web - iMasters7Masters Acessibilidade Web - iMasters
7Masters Acessibilidade Web - iMastersClécio Bachini
 
Pessoas - Um estranho entrave no desenvolvimento: Google I/O Extended 2014
Pessoas - Um estranho entrave no desenvolvimento: Google I/O Extended 2014Pessoas - Um estranho entrave no desenvolvimento: Google I/O Extended 2014
Pessoas - Um estranho entrave no desenvolvimento: Google I/O Extended 2014Clécio Bachini
 
7Masters Open Data - O Imposto do XML
7Masters Open Data - O Imposto do XML7Masters Open Data - O Imposto do XML
7Masters Open Data - O Imposto do XMLClécio Bachini
 
A Era da Experiência do Usuário
A Era da Experiência do UsuárioA Era da Experiência do Usuário
A Era da Experiência do UsuárioClécio Bachini
 
Tag Story: Uma breve história da Teia - 3º Tableless Conference
Tag Story: Uma breve história da Teia - 3º Tableless ConferenceTag Story: Uma breve história da Teia - 3º Tableless Conference
Tag Story: Uma breve história da Teia - 3º Tableless ConferenceClécio Bachini
 
Open Web, Semântica e Marketing - Senac Roadshow TI 2014
Open Web, Semântica e Marketing - Senac Roadshow TI 2014Open Web, Semântica e Marketing - Senac Roadshow TI 2014
Open Web, Semântica e Marketing - Senac Roadshow TI 2014Clécio Bachini
 

Destaque (7)

A Era Pós Devices - 7Masters - Mobile
A Era Pós Devices - 7Masters - Mobile A Era Pós Devices - 7Masters - Mobile
A Era Pós Devices - 7Masters - Mobile
 
7Masters Acessibilidade Web - iMasters
7Masters Acessibilidade Web - iMasters7Masters Acessibilidade Web - iMasters
7Masters Acessibilidade Web - iMasters
 
Pessoas - Um estranho entrave no desenvolvimento: Google I/O Extended 2014
Pessoas - Um estranho entrave no desenvolvimento: Google I/O Extended 2014Pessoas - Um estranho entrave no desenvolvimento: Google I/O Extended 2014
Pessoas - Um estranho entrave no desenvolvimento: Google I/O Extended 2014
 
7Masters Open Data - O Imposto do XML
7Masters Open Data - O Imposto do XML7Masters Open Data - O Imposto do XML
7Masters Open Data - O Imposto do XML
 
A Era da Experiência do Usuário
A Era da Experiência do UsuárioA Era da Experiência do Usuário
A Era da Experiência do Usuário
 
Tag Story: Uma breve história da Teia - 3º Tableless Conference
Tag Story: Uma breve história da Teia - 3º Tableless ConferenceTag Story: Uma breve história da Teia - 3º Tableless Conference
Tag Story: Uma breve história da Teia - 3º Tableless Conference
 
Open Web, Semântica e Marketing - Senac Roadshow TI 2014
Open Web, Semântica e Marketing - Senac Roadshow TI 2014Open Web, Semântica e Marketing - Senac Roadshow TI 2014
Open Web, Semântica e Marketing - Senac Roadshow TI 2014
 

Semelhante a HTML5- Road Show TI - Senac Jaboticabal

Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5Danilo Sousa
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaDiego Cavalca
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxLuiz Antonio
 
HTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebHTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebDiego Pessoa
 
Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008Clauber Stipkovic
 
ASP.NET - Conhecendo um pouco do framework
ASP.NET - Conhecendo um pouco do frameworkASP.NET - Conhecendo um pouco do framework
ASP.NET - Conhecendo um pouco do frameworkGuilherme Ferreira
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software LivreRuan Carvalho
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livreRuan Carvalho
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Webigorpimentel
 
Criando Jogos com HTML5
Criando Jogos com HTML5Criando Jogos com HTML5
Criando Jogos com HTML5José Farias
 
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
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudosinfo_cimol
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aulaclodiney cruz
 
Desenvolvimento Web com Firefox - Clauber Stipkovic Halic
Desenvolvimento Web com Firefox - Clauber Stipkovic HalicDesenvolvimento Web com Firefox - Clauber Stipkovic Halic
Desenvolvimento Web com Firefox - Clauber Stipkovic HalicTchelinux
 
Aula Inaugural Faveni - glauciobedim.com
Aula Inaugural Faveni - glauciobedim.comAula Inaugural Faveni - glauciobedim.com
Aula Inaugural Faveni - glauciobedim.comAgência GB Creative
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Valmir Justo
 

Semelhante a HTML5- Road Show TI - Senac Jaboticabal (20)

Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
HTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebHTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da Web
 
Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008
 
ASP.NET - Conhecendo um pouco do framework
ASP.NET - Conhecendo um pouco do frameworkASP.NET - Conhecendo um pouco do framework
ASP.NET - Conhecendo um pouco do framework
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Html5 ass
Html5 assHtml5 ass
Html5 ass
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livre
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Criando Jogos com HTML5
Criando Jogos com HTML5Criando Jogos com HTML5
Criando Jogos com HTML5
 
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...
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
Desenvolvimento Web com Firefox - Clauber Stipkovic Halic
Desenvolvimento Web com Firefox - Clauber Stipkovic HalicDesenvolvimento Web com Firefox - Clauber Stipkovic Halic
Desenvolvimento Web com Firefox - Clauber Stipkovic Halic
 
Aula Inaugural Faveni - glauciobedim.com
Aula Inaugural Faveni - glauciobedim.comAula Inaugural Faveni - glauciobedim.com
Aula Inaugural Faveni - glauciobedim.com
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 

HTML5- Road Show TI - Senac Jaboticabal

  • 1. HTML 5 Open Web Platform Jaboticabal
  • 3. HTML5 A nova fronteira no projeto de aplicações WEB soyuz.com.br
  • 4. 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
  • 6. Pra começo de conversa  Design é Projeto | Draw é Desenho soyuz.com.br
  • 7. O HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido por Tim Berners-Lee nos anos 1990 INTRO soyuz.com.br
  • 8. 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
  • 9. 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. Marcação HTML Apresentação CSS Comportamento JavaScript soyuz.com.br
  • 10. HTML 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 soyuz.com.br
  • 11. 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
  • 12. 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. Marcação HTML Apresentação Comportamento APIs CSS JavaScript soyuz.com.br
  • 13. APIs O HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido por Tim Berners-Lee nos anos 1990 HTML5 HTML CSS APIs + JS soyuz.com.br
  • 14. Compatibilidade Renderização dos browsers 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 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
  • 15. 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
  • 16. 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. http://br.html5boilerplate.com/ Framework com soluções de compatibilidade para HTML5. soyuz.com.br
  • 17. A simplicidade é o último grau de sofisticação NOVIDADES soyuz.com.br
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. Saber o significado das palavras é essencial para o entendimento! SEMÂNTICA soyuz.com.br
  • 22. Elementos estruturais Umas das maiores novidades do HTML5 é a possibilidade de atribuir às diversas seções estuturais do documento um elemento próprio, nativo da linguagem. HTML4 / XHTML HTML5 <body> <body> <div id="topo"></div> <header></header> <div id="navegacao"></div> <nav></nav> <div id="principal"></div> <article></article> <div id="lateral"></div> <aside></aside> <div id="rodape"></div> <footer></footer> </body> </body> soyuz.com.br
  • 23. 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
  • 24. O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo. MULTIMÍDIA soyuz.com.br
  • 25. 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
  • 26. 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
  • 27. Á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
  • 28. 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 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 soyuz.com.br
  • 29. O HTML não é uma linguagem de programação APIS soyuz.com.br
  • 30. 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
  • 31. O estilo está sob as palavras como dentro delas. É igualmente a alma e a carne de uma obra ESTILO soyuz.com.br
  • 32. 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
  • 33. Mobile não é uma tecnologia é um estilo de vida WEB APPS soyuz.com.br
  • 35. Aplicativos Mobile HTML5 Playboy Financial Times Linkedin Zeewe soyuz.com.br
  • 36. Mudança do fluxo de traballho CASES soyuz.com.br
  • 37. 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
  • 38. 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
  • 39. 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
  • 40. OPEN WEB PLATFORM soyuz.com.br
  • 41. Você é o que você compartilha  LINKS E REFERÊNCIAS soyuz.com.br
  • 42. Soyuz Sistemas Links e Referências http://www.soyuz.com.br/ Livro HTML5 – Embarque Imediato http://soyuz.com.br/html5/ Can I Use? http://caniuse.com/ 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
  • 43. Fica a dica  PUBLICAÇÕES soyuz.com.br
  • 44. Publicações “Jaba para Fábio Flatschart” soyuz.com.br
  • 46. Muito obrigado ! @cbachini cbachini@gmail.com soyuz.com.br soyuz.com.br