html5 e css3 : por onde começar no mercado editorial ?

CONFERÊNCIA REVOLUÇÃO EBOOK Outubro | 2013

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

Autor da Editora Brasport

@fabioflat

flatschart.com

realidade

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

flatschart.com

mais do que HTML5 tecnologias, ferramentas e serviços

flatschart.com

HTML5 HTML CSS APIs + JS

mais do que um rótulo uma plataforma

flatschart.com

mais do que uma plataforma the open web platform

flatschart.com

core business

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

flatschart.com

por onde começar ? mas…

flatschart.com

não sou programador para saber HTML e CSS

derrubando mitos

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

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

flatschart.com

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>

http://flatschart.com/html5/audio.html

flatschart.com

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>

http://flatschart.com/html5/video.html

6

Canvas & SVG

flatschart.com

http://flatschart.com/html5/canvas_simples.html

flatschart.com http://flatschart.com/html5/svg.html

7

+ HTML5...

flatschart.com

flatschart.com

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 http://slides.html5rocks.com/#speech-input

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-fizemos-o-oldradio https://developer.mozilla.org/en-US/demos/detail/old-radio/launch

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-blending-to-the-web

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

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

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://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

flatschart.com 45

Em breve

Obrigado

flatschart.com 46

fabioflat@gmail.com | @fabioflat