html5 e css3 : por onde começar no mercado editorial ?
DESCRIPTION
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)TRANSCRIPT
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
