the developer's conference (tdc) 2013 - florianópolis: html5 + css3 em múltiplos browsers,...
DESCRIPTION
Eu apresentei a minha palestra sobre desenvolvimento Web com HTML5 e CSS3 voltado para múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos no dia 26 de maio de 2013, das 11h10 às 12h. A palestra foi apresentada no auditório Stadium e foi gravada para ser disponibilizada depois. Na palestra, eu apresentei alguns novos elementos do HTML5 que permitem desenvolver páginas Web mais semânticas, como: header, footor, article, section, nav e aside. Depois, eu apresentei alguns recursos de módulos das especificações que constituem a CSS3, como os novos seletores, arredondamento de bordas com a propriedade border-radius, gradientes de cores lineares com a função linear-gradient e radial com a função radial-gradient, sombras em textos com a propriedade text-shadow e em caixas com a propriedade box-shadow, efeitos de transição em algumas propriedades com a propriedade transition.TRANSCRIPT
Globalcode – Open4education
em múltiplos browsers,
em múltiplas plataformas
e em múltiplos dispositivos
Rogério Moraes de Carvalho
VITA Informática
@rogeriom
rogeriomc.wordpress.com
Globalcode – Open4education
Agenda
HTML5 (alguns recursos)
Demo - HTML5
CSS3 (alguns recursos)
Demo - CSS3
Suporte múltiplo
Demo - Suporte múltiplo
Globalcode – Open4education
HTML5 (alguns recursos)
Uma Web mais semântica
Elemento header
Informações introdutórias ou
de navegação numa página ou
num artigo
Elemento footer
Informações finais numa
página ou num artigo
Elemento article
Composição autônoma
Globalcode – Open4education
HTML5 (alguns recursos)
Uma Web mais semântica
Elemento section
Seção genérica de um
documento ou aplicação
Elemento nav
Seção da página com links
para navegação
Elemento aside
Seção separada do conteúdo
(comum em barras laterais)
Globalcode – Open4education
Demo - HTML5
Globalcode – Open4education
CSS3 (alguns recursos)
Formatação mais poderosa
Seletor E:firstchild (CSS2)
De um elemento E, primeiro
filho do seu elemento pai
Seletor E:lastchild (CSS3)
De um elemento E, último filho
do seu elemento pai
Seletor E:nth-child(n) (CSS3)
De um elemento E, enésimo
filho do seu elemento pai
Globalcode – Open4education
CSS3 (alguns recursos)
Formatação mais poderosa
Seletor E:nth-last-child(n) (CSS3)
De um elemento E, o enésimo
filho do seu elemento pai,
contando a partir do último
Seletor E:checked (CSS3)
Um elemento E da interface
com o usuário que está
checadoExemplo: checkbox ou radio-button
Globalcode – Open4education
CSS3 (alguns recursos)
Formatação mais poderosa
Seletor E F (CSS1)
Um elemento F descendente
de um elemento E
Seletor E > F (CSS2)
Um elemento F filho de um
elemento E
Seletor E + F (CSS2)
Um elemento F imediatamente
precedido por um elemento E
Globalcode – Open4education
CSS3 (alguns recursos)
Formatação mais poderosa
Seletor E ~ F (CSS3)
Um elemento F precedido por
um elemento E
Seletor E :: before (CSS2)
Conteúdo gerado antes do
elemento E
Seletor E :: after (CSS2)
Conteúdo gerado depois do
elemento E
Globalcode – Open4education
CSS3 (alguns recursos)
Formatação mais poderosa
Propriedade border-radius(CSS3)
Arredondamento de bordas
Função linear-gradient (CSS3)
Gradiente linear de cores
Função radial-gradient (CSS3)
Gradiente radial de cores
Globalcode – Open4education
CSS3 (alguns recursos)
Formatação mais poderosa
Propriedade text-shadow(CSS3)
Sombra num texto
Propriedade box-shadow(CSS3)
Sombra numa caixa
Propriedade transition (CSS3)
Efeito de transição em algumas
propriedades
Globalcode – Open4education
Demo - CSS3
Globalcode – Open4education
Suporte múltiplo
Múltiplos browsers
Google Chrome
Microsoft Internet Explorer
Mozilla Firefox
Apple Safari
Opera
Globalcode – Open4education
Suporte múltiplo
Múltiplas plataformas (desktop e móveis)
Windows Android
Mac OS X
Linux
Chrome OS BackBerry OS
Firefox OS
Globalcode – Open4education
Suporte múltiplo
Múltiplos dispositivos
Desktops Smartphones
Notebooks Tablets
Netbooks Phablets
Ultrabooks
Chromebooks
Globalcode – Open4education
Demo - Suporte múltiplo
Globalcode – Open4education
Documentação
HTML5 Specification
http://www.w3.org/TR/html5/
CSS3 (por estabilidade das especificações)
http://www.w3.org/TR/CSS/