Outubro | 2013

CONFERÊNCIA REVOLUÇÃO EBOOK

flatschart.com
HTML5 e CSS3
Por onde começar ?
Fábio Flatschart
@fabioflat

flatschart.com
Fábio Flatschart

Marketing & Digital Publishing na Soyuz
Sócio na Flatschart Consultoria
Professor no MBA da FGV e FIA

A...
O futuro já chegou. Só não está uniformemente distribuído !
William Gibson, autor de Neuromancer (1984)

realidade

flatsc...
HTML5
HTML

CSS

tecnologias, ferramentas e serviços

mais do que HTML5

flatschart.com

APIs + JS
uma plataforma

mais do que um rótulo

flatschart.com
the open web platform

mais do que uma plataforma

flatschart.com
A platform for innovation, consolidation and cost efficiencies
Jeff Jaffe, W3C CEO

core business

flatschart.com
mas…

por onde começar ?

flatschart.com
derrubando mitos

não sou programador para saber
HTML e CSS
flatschart.com
1
Não é, e nem precisa ser, porque HTML e CSS não são
linguagens de programação – são linguagens marcação.

flatschart.com
2
Corpo, título, subtítulo, parágrafo, quebra de linha,
citação, artigo, rodapé, imagem – se esta nomenclatura
e esta semâ...
3
Semântica : Macro seções estruturais ( entre muitas outras coisas )

flatschart.com
flatschart.com
flatschart.com
flatschart.com
flatschart.com
4
Semântica : EPUB 3 Structural Semantics
Vocabulary
<section epub:type="dedication">
flatschart.com
http://www.idpf.org/epub/vocab/structure
5
Áudio & Vídeo : De olho em suporte e formatos

flatschart.com
Code is easy 
<audio controls>

<source src="mozart.aac"/>
<source src="mozart.ogg"/>
<source src="mozart.mp3"/>
<p><a hr...
Code is easy 
<video height="272" width="360" controls
preload poster="foto.jpg">

<source src="video.m4v"/>
<source src=...
6
Canvas & SVG

flatschart.com
http://flatschart.com/html5/canvas_simples.html
flatschart.com
http://flatschart.com/html5/svg.html
7
+ HTML5...

flatschart.com
APIs

Demo

Web Storage

http://slides.html5rocks.com/#web-storage

Geolocation

http://slides.html5rocks.com/#geolocation...
flatschart.com/html5
diveintohtml5.com.br

flatschart.com
8
flatschart.com
Colunas / Transparência / Gradiente / Bordas / Transições / Animações / Áudio / JS

http://bernarddeluna.com/xhtml/como-fi...
http://dev.w3.org/csswg/css3-regions/
http://www.adobe.com/devnet/html5/articles/css3-regions.html
http://dev.w3.org/csswg/css3-exclusions
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html
http://blogs.adobe.com/webplatform/2012/04/04/bringing-blen...
https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
http://html.adobe.com/webstandards/csscustomfilters/cssfilterl...
flatschart.com
http://www.20thingsilearned.com/pt-BR
8
Pessoas

flatschart.com
O livro digital requer que editores e produtores
adquiriram conhecimentos mínimos em HTML, CSS e
XML. Felizmente para o me...
Coaching
Capacitação
Equipe WEB = Equipe Multidisciplinar
Equipe WEB ≠ Meninos da Informática
Workflow

flatschart.com
9
Ferramentas

flatschart.com
Just Code !
flatschart.com
flatschart.com
https://www.google.com/webdesigner
flatschart.com
http://html.adobe.com/edge/animate
10
Bibliografia

flatschart.com
HTML5 & CSS3
FLATSCHART, Fábio. HTML5: Embarque Imediato. Rio de Janeiro: Brasport, 2011
http://diveintohtml5.com.br
http:...
Em breve

flatschart.com

45
Obrigado 

fabioflat@gmail.com | @fabioflat
flatschart.com

46
Upcoming SlideShare
Loading in...5
×

HTML5 e CSS3 : Por onde começar no mercado editorial ?

1,399

Published on

Material apresentado na Conferência Revolução eBook : Produção de eBooks & Melhores Práticas

"O livro digital requer que editores e produtores adquiriram conhecimentos mínimos em HTML, CSS e XML. Felizmente para o mercado editorial, estas competências tem sido utilizadas, compartilhadas, aprimoradas e consolidadas por desenvolvedores web e web designers há anos!"

SALVETTE, Paul. The eBook Design and Development Guide Bangkok : BB eBooks, 2012 (Kindle Edition)

Published in: Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,399
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
65
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

HTML5 e CSS3 : Por onde começar no mercado editorial ?

  1. 1. Outubro | 2013 CONFERÊNCIA REVOLUÇÃO EBOOK flatschart.com
  2. 2. HTML5 e CSS3 Por onde começar ? Fábio Flatschart @fabioflat flatschart.com
  3. 3. Fábio Flatschart Marketing & Digital Publishing na Soyuz Sócio na Flatschart Consultoria Professor no MBA da FGV e FIA Autor da Editora Brasport @fabioflat flatschart.com
  4. 4. O futuro já chegou. Só não está uniformemente distribuído ! William Gibson, autor de Neuromancer (1984) realidade flatschart.com
  5. 5. HTML5 HTML CSS tecnologias, ferramentas e serviços mais do que HTML5 flatschart.com APIs + JS
  6. 6. uma plataforma mais do que um rótulo flatschart.com
  7. 7. the open web platform mais do que uma plataforma flatschart.com
  8. 8. A platform for innovation, consolidation and cost efficiencies Jeff Jaffe, W3C CEO core business flatschart.com
  9. 9. mas… por onde começar ? flatschart.com
  10. 10. derrubando mitos não sou programador para saber HTML e CSS flatschart.com
  11. 11. 1 Não é, e nem precisa ser, porque HTML e CSS não são linguagens de programação – são linguagens marcação. flatschart.com
  12. 12. 2 Corpo, título, subtítulo, parágrafo, quebra de linha, citação, artigo, rodapé, imagem – se esta nomenclatura e esta semântica não são familiares para um editor, para quem mais serão? É a partir delas que se estrutura um documento HTML! flatschart.com
  13. 13. 3 Semântica : Macro seções estruturais ( entre muitas outras coisas ) flatschart.com
  14. 14. flatschart.com
  15. 15. flatschart.com
  16. 16. flatschart.com
  17. 17. flatschart.com
  18. 18. 4 Semântica : EPUB 3 Structural Semantics Vocabulary <section epub:type="dedication"> flatschart.com
  19. 19. http://www.idpf.org/epub/vocab/structure
  20. 20. 5 Áudio & Vídeo : De olho em suporte e formatos flatschart.com
  21. 21. Code is easy  <audio controls> <source src="mozart.aac"/> <source src="mozart.ogg"/> <source src="mozart.mp3"/> <p><a href="mozart.mp3">Baixe o arquivo</a></p> </audio> flatschart.com http://flatschart.com/html5/audio.html
  22. 22. Code is easy  <video height="272" width="360" controls preload poster="foto.jpg"> <source src="video.m4v"/> <source src="video.ogv"/> <source src="video.webm"/> <p><a href="video.m4v">Baixe o vídeo</a></p> </video> flatschart.com http://flatschart.com/html5/video.html
  23. 23. 6 Canvas & SVG flatschart.com
  24. 24. http://flatschart.com/html5/canvas_simples.html
  25. 25. flatschart.com http://flatschart.com/html5/svg.html
  26. 26. 7 + HTML5... flatschart.com
  27. 27. APIs Demo Web Storage http://slides.html5rocks.com/#web-storage Geolocation http://slides.html5rocks.com/#geolocation Device Orientation http://slides.html5rocks.com/#slide-orientation Speech Input flatschart.com http://slides.html5rocks.com/#speech-input
  28. 28. flatschart.com/html5 diveintohtml5.com.br flatschart.com
  29. 29. 8 flatschart.com
  30. 30. Colunas / Transparência / Gradiente / Bordas / Transições / Animações / Áudio / JS http://bernarddeluna.com/xhtml/como-fizemos-o-oldradio https://developer.mozilla.org/en-US/demos/detail/old-radio/launch
  31. 31. http://dev.w3.org/csswg/css3-regions/ http://www.adobe.com/devnet/html5/articles/css3-regions.html
  32. 32. http://dev.w3.org/csswg/css3-exclusions
  33. 33. https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web
  34. 34. https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab http://adobe.github.com/web-platform/samples/css-customfilters
  35. 35. flatschart.com http://www.20thingsilearned.com/pt-BR
  36. 36. 8 Pessoas flatschart.com
  37. 37. O livro digital requer que editores e produtores adquiriram conhecimentos mínimos em HTML, CSS e XML. Felizmente para o mercado editorial, estas competências tem sido utilizadas, compartilhadas, aprimoradas e consolidadas por desenvolvedores web e web designers há anos! SALVETTE, Paul. The eBook Design and Development Guide Bangkok : BB eBooks, 2012 (Kindle Edition) flatschart.com
  38. 38. Coaching Capacitação Equipe WEB = Equipe Multidisciplinar Equipe WEB ≠ Meninos da Informática Workflow flatschart.com
  39. 39. 9 Ferramentas flatschart.com
  40. 40. Just Code ! flatschart.com
  41. 41. flatschart.com https://www.google.com/webdesigner
  42. 42. flatschart.com http://html.adobe.com/edge/animate
  43. 43. 10 Bibliografia flatschart.com
  44. 44. HTML5 & CSS3 FLATSCHART, Fábio. HTML5: Embarque Imediato. Rio de Janeiro: Brasport, 2011 http://diveintohtml5.com.br http://www.w3c.br/Cursos/CursoHTML5 http://www.w3c.br/Cursos/CursoCSS3 HTML5 for Publishers - http://shop.oreilly.com/product/0636920022473.do EPUB 3 EPUB 3 Best Practices - http://shop.oreilly.com/product/0636920024897.do What is EPUB 3? - http://shop.oreilly.com/product/0636920022442.do Accessible EPUB 3 - http://shop.oreilly.com/product/0636920025283.do EPUB 3 Structural Semantics Vocabulary - http://www.idpf.org/epub/vocab/structure Padrões http://www.w3.org/TR/html5 http://idpf.org Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers http://caniuse.com Open Web CUSIN, Cesar; BACHINI, Clécio; FLATSCHART, Fábio. Open Web Platform. Rio de Janeiro: Brasport, 2013. flatschart.com 44
  45. 45. Em breve flatschart.com 45
  46. 46. Obrigado  fabioflat@gmail.com | @fabioflat flatschart.com 46
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×