SlideShare uma empresa Scribd logo
flatschart.com
Semana de Tecnologia UniToledo
     Araçatuba - 28 de setembro de 2011




                flatschart.com
HTML5
A nova fronteira no desenvolvimento de
                        aplicações WEB




          flatschart.com
Fábio Flatschart
No mercado WEB desde 1997, é consultor de
desenvolvimento e implantação de soluções e ferramentas
da Adobe Systems Brasil.

Autor e escritor técnico da Editora Brasport e da
Editora SENAC/SP

No SENAC /SP atuou no atendimento corporativo e
intermediação de parcerias com grandes empresas como
Adobe, Apple, Editora ABRIL, Microsoft, UOL e W3C.

Certificado em HTML5 pelo W3C escritório Brasil.

FGV MBA Marketing
USJT Criação Visual e Multimídia
USP Escola de Comunicação e Artes


                                         flatschart.com
Conexões

@fabioflat

slideshare.net/fabioflat

delicio.us/fabioflat

linkedin.com/in/fabioflat
        flatschart.com
O HTML5 não é uma ruptura, é a continuidade e evolução do modelo
concebido por Tim Berners-Lee nos anos 1990

INTRO


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

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



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


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




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




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




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

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




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




                                                       flatschart.com
front end developer
        flatschart.com
front end developer
        flatschart.com
A simplicidade é o último grau de sofisticação

NOVIDADES


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




                          flatschart.com
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">




                          flatschart.com
Estrutura básica
<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="utf-8">

<title>Estrutura básica</title>

</head>

<body>

</body>

</html>


                          flatschart.com
Saber o significado das palavras é essencial para o entendimento!

SEMÂNTICA


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


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



                           flatschart.com
O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.

MULTIMÍDIA


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


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



                                    flatschart.com
Á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




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

APIS


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


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



                                           flatschart.com
Mobile não é uma tecnologia é um estilo de vida

WEB APPS


                               flatschart.com
flatschart.com
Aplicativos Mobile HTML5

Playboy


Financial Times


Linkedin


Zeewe

            flatschart.com
Mudança do fluxo de traballho

MINI CASE


                                flatschart.com
Mini Case
Parceria com a 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


                                      flatschart.com
Você é o que você compartilha 

LINKS E REFERÊNCIAS


                             flatschart.com
Links e Referências
Livro HTML5 – Embarque Imediato
http://flatschart.com/html5/

HTML5 Doctor, helping you implement HTML5 today
http://html5doctor.com/

DIVE INTO HTML5
http://diveintohtml5.org/
                                                         Adobe HTML5 and CSS3 development
                                                         http://www.adobe.com/devnet/html5.html
HTML5: Edition for Web Authors
http://dev.w3.org/html5/spec-author-view/
                                                         HTML5 and CSS3 - Adobe - The Expressive Web - Beta
                                                         http://beta.theexpressiveweb.com/
W3C Brasil
http://www.w3c.br                                        Adobe Dreamweaver CS5.5
                                                         http://www.adobe.com/br/products/dreamweaver.html
Curso de HTML5 do W3C Brasil
http://www.w3c.br/Cursos/CursoHTML5                      Adobe Labs
                                                         http://labs.adobe.com/
Stickman
http://www.drawastickman.com/

20 Lições - Google
http://www.20thingsilearned.com/pt-BR

                                                  flatschart.com
Fica a dica 

PUBLICAÇÕES


                flatschart.com
Publicações




flatschart.com
Muito obrigado !




               @fabioflat

               fabioflat@gmail.com

               flatschart.com

      flatschart.com

Mais conteúdo relacionado

Mais procurados

Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
ondazul
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
PeslPinguim
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
Léo Dias
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
Faculdade São Lucas
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
Tim Koch-Grünberg
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
Anderson Aguiar
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
Jose Berardo
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
Clécio Bachini
 
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
igorpimentel
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
Clécio Bachini
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
Ana Carolina Gracioso
 
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
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)
Gustavo Zimmermann
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
Fábio Flatschart
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
Sérgio Souza Costa
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
igorpimentel
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
Jose Berardo
 

Mais procurados (20)

Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
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
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 
HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
 

Destaque

SVG como exemplo de XML
SVG como exemplo de XMLSVG como exemplo de XML
SVG como exemplo de XML
José Maria Silveira Neto
 
SVG Essencial
SVG EssencialSVG Essencial
SVG Essencial
Helder da Rocha
 
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011
Davidson Fellipe
 
Desenvolvimento de Aplicações
Desenvolvimento de AplicaçõesDesenvolvimento de Aplicações
Desenvolvimento de Aplicações
José Maria Silveira Neto
 
Gráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVG
Helder da Rocha
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
Heraldo Gonçalves Lima Junior
 
Introdução a estrutura de dados josé lucas rangel - raulzinho.cb@hotmail.com
Introdução a estrutura de dados   josé lucas rangel - raulzinho.cb@hotmail.comIntrodução a estrutura de dados   josé lucas rangel - raulzinho.cb@hotmail.com
Introdução a estrutura de dados josé lucas rangel - raulzinho.cb@hotmail.com
Raul Batalha
 
Fundamentos da programação de computadores 2ª edição
Fundamentos da programação de computadores   2ª ediçãoFundamentos da programação de computadores   2ª edição
Fundamentos da programação de computadores 2ª edição
Leandro Rocha de Oliveira
 

Destaque (8)

SVG como exemplo de XML
SVG como exemplo de XMLSVG como exemplo de XML
SVG como exemplo de XML
 
SVG Essencial
SVG EssencialSVG Essencial
SVG Essencial
 
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011
 
Desenvolvimento de Aplicações
Desenvolvimento de AplicaçõesDesenvolvimento de Aplicações
Desenvolvimento de Aplicações
 
Gráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVGGráficos Vetoriais na Web com SVG
Gráficos Vetoriais na Web com SVG
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Introdução a estrutura de dados josé lucas rangel - raulzinho.cb@hotmail.com
Introdução a estrutura de dados   josé lucas rangel - raulzinho.cb@hotmail.comIntrodução a estrutura de dados   josé lucas rangel - raulzinho.cb@hotmail.com
Introdução a estrutura de dados josé lucas rangel - raulzinho.cb@hotmail.com
 
Fundamentos da programação de computadores 2ª edição
Fundamentos da programação de computadores   2ª ediçãoFundamentos da programação de computadores   2ª edição
Fundamentos da programação de computadores 2ª edição
 

Semelhante a HTML5 - A nova fronteira no desenvolvimento de aplicações WEB

Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5
Danilo 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ândia
Diego Cavalca
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
Fábio Flatschart
 
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
Luiz Antonio
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 
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
Diego Pessoa
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
Ruan Carvalho
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livre
Ruan Carvalho
 
Html5 ass
Html5 assHtml5 ass
Html5
Html5Html5
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
Guilherme Ferreira
 
Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008
Clauber Stipkovic
 
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 estudos
info_cimol
 
Silverlight no MIC Summer 2011
Silverlight no MIC Summer 2011 Silverlight no MIC Summer 2011
Silverlight no MIC Summer 2011
Felipe Pimentel
 
Aula Inaugural Faveni - glauciobedim.com
Aula Inaugural Faveni - glauciobedim.comAula Inaugural Faveni - glauciobedim.com
Aula Inaugural Faveni - glauciobedim.com
Agência GB Creative
 
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
Anderson Luís Furlan
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
clodiney cruz
 
Criando Jogos com HTML5
Criando Jogos com HTML5Criando Jogos com HTML5
Criando Jogos com HTML5
José Farias
 
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
Reinaldo Ferraz
 

Semelhante a HTML5 - A nova fronteira no desenvolvimento de aplicações WEB (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
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
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
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
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
 
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
 
Html5 ass
Html5 assHtml5 ass
Html5 ass
 
Html5
Html5Html5
Html5
 
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
 
Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008
 
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
 
Silverlight no MIC Summer 2011
Silverlight no MIC Summer 2011 Silverlight no MIC Summer 2011
Silverlight no MIC Summer 2011
 
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
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
Criando Jogos com HTML5
Criando Jogos com HTML5Criando Jogos com HTML5
Criando Jogos com HTML5
 
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
 

Mais de Fábio Flatschart

Empresas Virtuais
Empresas VirtuaisEmpresas Virtuais
Empresas Virtuais
Fábio Flatschart
 
Gestao de Midias Digitais
Gestao de Midias DigitaisGestao de Midias Digitais
Gestao de Midias Digitais
Fábio Flatschart
 
HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?
Fábio Flatschart
 
Tecnologias Digitais
Tecnologias DigitaisTecnologias Digitais
Tecnologias Digitais
Fábio Flatschart
 
Direcao de Arte e Open Web Platform
Direcao de Arte e Open Web PlatformDirecao de Arte e Open Web Platform
Direcao de Arte e Open Web Platform
Fábio Flatschart
 
Empresas Digitais : Estrategias de Posicionamento
Empresas Digitais : Estrategias de PosicionamentoEmpresas Digitais : Estrategias de Posicionamento
Empresas Digitais : Estrategias de Posicionamento
Fábio Flatschart
 
SEO, Semantica e HTML5
SEO, Semantica e HTML5SEO, Semantica e HTML5
SEO, Semantica e HTML5
Fábio Flatschart
 
Mobile, Adobe & Cia
Mobile, Adobe & CiaMobile, Adobe & Cia
Mobile, Adobe & Cia
Fábio Flatschart
 
Mobile & Cia
Mobile & CiaMobile & Cia
Mobile & Cia
Fábio Flatschart
 
Fluxo de trabalho com Illustrator e Flash
Fluxo de trabalho com Illustrator e FlashFluxo de trabalho com Illustrator e Flash
Fluxo de trabalho com Illustrator e Flash
Fábio Flatschart
 
Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Fábio Flatschart
 
Novos profissionais, novas ferramentas e novos mercados
Novos profissionais, novas ferramentas e novos mercadosNovos profissionais, novas ferramentas e novos mercados
Novos profissionais, novas ferramentas e novos mercados
Fábio Flatschart
 
E-consumidor
 E-consumidor E-consumidor
E-consumidor
Fábio Flatschart
 
Ebusiness
 Ebusiness Ebusiness
Ebusiness
Fábio Flatschart
 
Revolucões
 Revolucões Revolucões
Revolucões
Fábio Flatschart
 
Computação Gráfica : novos profissionais, novas ferramentas e novos mercados
Computação Gráfica : novos profissionais, novas ferramentas e novos mercadosComputação Gráfica : novos profissionais, novas ferramentas e novos mercados
Computação Gráfica : novos profissionais, novas ferramentas e novos mercados
Fábio Flatschart
 
Games e Interatividade
Games e InteratividadeGames e Interatividade
Games e Interatividade
Fábio Flatschart
 
Comunicação e Marketing na era da Interatividade
Comunicação e Marketing na era da InteratividadeComunicação e Marketing na era da Interatividade
Comunicação e Marketing na era da Interatividade
Fábio Flatschart
 
Produção Multimídia
Produção MultimídiaProdução Multimídia
Produção Multimídia
Fábio Flatschart
 
Trabalhando com Hipertexto
Trabalhando com HipertextoTrabalhando com Hipertexto
Trabalhando com Hipertexto
Fábio Flatschart
 

Mais de Fábio Flatschart (20)

Empresas Virtuais
Empresas VirtuaisEmpresas Virtuais
Empresas Virtuais
 
Gestao de Midias Digitais
Gestao de Midias DigitaisGestao de Midias Digitais
Gestao de Midias Digitais
 
HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?HTML5 e CSS3 : Por onde começar no mercado editorial ?
HTML5 e CSS3 : Por onde começar no mercado editorial ?
 
Tecnologias Digitais
Tecnologias DigitaisTecnologias Digitais
Tecnologias Digitais
 
Direcao de Arte e Open Web Platform
Direcao de Arte e Open Web PlatformDirecao de Arte e Open Web Platform
Direcao de Arte e Open Web Platform
 
Empresas Digitais : Estrategias de Posicionamento
Empresas Digitais : Estrategias de PosicionamentoEmpresas Digitais : Estrategias de Posicionamento
Empresas Digitais : Estrategias de Posicionamento
 
SEO, Semantica e HTML5
SEO, Semantica e HTML5SEO, Semantica e HTML5
SEO, Semantica e HTML5
 
Mobile, Adobe & Cia
Mobile, Adobe & CiaMobile, Adobe & Cia
Mobile, Adobe & Cia
 
Mobile & Cia
Mobile & CiaMobile & Cia
Mobile & Cia
 
Fluxo de trabalho com Illustrator e Flash
Fluxo de trabalho com Illustrator e FlashFluxo de trabalho com Illustrator e Flash
Fluxo de trabalho com Illustrator e Flash
 
Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0Grupo de estudos AS3 - Introdução ao ActionScript 3.0
Grupo de estudos AS3 - Introdução ao ActionScript 3.0
 
Novos profissionais, novas ferramentas e novos mercados
Novos profissionais, novas ferramentas e novos mercadosNovos profissionais, novas ferramentas e novos mercados
Novos profissionais, novas ferramentas e novos mercados
 
E-consumidor
 E-consumidor E-consumidor
E-consumidor
 
Ebusiness
 Ebusiness Ebusiness
Ebusiness
 
Revolucões
 Revolucões Revolucões
Revolucões
 
Computação Gráfica : novos profissionais, novas ferramentas e novos mercados
Computação Gráfica : novos profissionais, novas ferramentas e novos mercadosComputação Gráfica : novos profissionais, novas ferramentas e novos mercados
Computação Gráfica : novos profissionais, novas ferramentas e novos mercados
 
Games e Interatividade
Games e InteratividadeGames e Interatividade
Games e Interatividade
 
Comunicação e Marketing na era da Interatividade
Comunicação e Marketing na era da InteratividadeComunicação e Marketing na era da Interatividade
Comunicação e Marketing na era da Interatividade
 
Produção Multimídia
Produção MultimídiaProdução Multimídia
Produção Multimídia
 
Trabalhando com Hipertexto
Trabalhando com HipertextoTrabalhando com Hipertexto
Trabalhando com Hipertexto
 

HTML5 - A nova fronteira no desenvolvimento de aplicações WEB

  • 2. Semana de Tecnologia UniToledo Araçatuba - 28 de setembro de 2011 flatschart.com
  • 3. HTML5 A nova fronteira no desenvolvimento de aplicações WEB flatschart.com
  • 4. Fábio Flatschart No mercado WEB desde 1997, é consultor de desenvolvimento e implantação de soluções e ferramentas da Adobe Systems Brasil. Autor e escritor técnico da Editora Brasport e da Editora SENAC/SP No SENAC /SP atuou no atendimento corporativo e intermediação de parcerias com grandes empresas como Adobe, Apple, Editora ABRIL, Microsoft, UOL e W3C. Certificado em HTML5 pelo W3C escritório Brasil. FGV MBA Marketing USJT Criação Visual e Multimídia USP Escola de Comunicação e Artes flatschart.com
  • 6. O HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido por Tim Berners-Lee nos anos 1990 INTRO flatschart.com
  • 7. 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 flatschart.com
  • 8. 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 flatschart.com
  • 9. 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 flatschart.com
  • 10. 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 flatschart.com
  • 11. 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 flatschart.com
  • 12. 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 flatschart.com
  • 13. 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. flatschart.com
  • 14. 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 flatschart.com
  • 15. 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. flatschart.com
  • 16. front end developer flatschart.com
  • 17. front end developer flatschart.com
  • 18. A simplicidade é o último grau de sofisticação NOVIDADES flatschart.com
  • 19. 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> flatschart.com
  • 20. 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"> flatschart.com
  • 21. Estrutura básica <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>Estrutura básica</title> </head> <body> </body> </html> flatschart.com
  • 22. Saber o significado das palavras é essencial para o entendimento! SEMÂNTICA flatschart.com
  • 23. 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> flatschart.com
  • 24. 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 flatschart.com
  • 25. O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo. MULTIMÍDIA flatschart.com
  • 26. 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 flatschart.com
  • 27. 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 flatschart.com
  • 28. Á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 flatschart.com
  • 29. 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 flatschart.com
  • 30. O HTML não é uma linguagem de programação APIS flatschart.com
  • 31. 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
  • 32. O estilo está sob as palavras como dentro delas. É igualmente a alma e a carne de uma obra ESTILO flatschart.com
  • 33. 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 flatschart.com
  • 34. Mobile não é uma tecnologia é um estilo de vida WEB APPS flatschart.com
  • 36. Aplicativos Mobile HTML5 Playboy Financial Times Linkedin Zeewe flatschart.com
  • 37. Mudança do fluxo de traballho MINI CASE flatschart.com
  • 38. Mini Case Parceria com a 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 flatschart.com
  • 39. Você é o que você compartilha  LINKS E REFERÊNCIAS flatschart.com
  • 40. Links e Referências Livro HTML5 – Embarque Imediato http://flatschart.com/html5/ HTML5 Doctor, helping you implement HTML5 today http://html5doctor.com/ DIVE INTO HTML5 http://diveintohtml5.org/ Adobe HTML5 and CSS3 development http://www.adobe.com/devnet/html5.html HTML5: Edition for Web Authors http://dev.w3.org/html5/spec-author-view/ HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/ W3C Brasil http://www.w3c.br Adobe Dreamweaver CS5.5 http://www.adobe.com/br/products/dreamweaver.html Curso de HTML5 do W3C Brasil http://www.w3c.br/Cursos/CursoHTML5 Adobe Labs http://labs.adobe.com/ Stickman http://www.drawastickman.com/ 20 Lições - Google http://www.20thingsilearned.com/pt-BR flatschart.com
  • 41. Fica a dica  PUBLICAÇÕES flatschart.com
  • 43. Muito obrigado ! @fabioflat fabioflat@gmail.com flatschart.com flatschart.com