HTML5 e CSS3 Giovanni Pires da Silva IIª Jornada Acadêmica Curso de ADS - IFRS
Giovanni Pires da Silva Desenvolvedor Web Front-end 10 anos trabalhando com web: HTML, CSS, JavaScript, XHTML 1.0, PHP, ActionScript 2.0, XML, MySQL, jquery, ActionScript 3.0, Smarty, JSON, HTML5, CSS3, CodeIgniter, OpenCart, Bootstrap, etc.
Esta apresentação NÃO CONTÉM todo o conteúdo de HTML5 e CSS3
Desenvolvimento Web Front-end Back-end
Desenvolvimento em Camadas Informação: HTML Formatação: CSS Comportamento: JavaScript
Modular
Em Desenvolvimento
Semântico
div#cabecalho div#menu div#conteudo div#lateral div#rodape
div div div div div
header#cabecalho nav#menu main#conteudo aside#lateral footer#rodape
header nav main aside footer
Estrutura básica e inicial
DOCTYPE Antes, XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">... Agora, HTML5: <!doctype html> <html lang="pt-br">...
Charset Antes, XHTML: <meta http-equiv="content-type" content="text/html; charset=utf-8 " /> Agora, HTML5 <meta charset="utf-8">
Elementos modificados <b> <i> <strong> e outros...
Elementos descontinuados <hgroup> <basefont> <big> <center> <font> <s> <strike> <tt> <u> <frame> <frameset> <noframes> <acronym> <applet> <isindex> <dir>
Novos elementos
<header> O elemento header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos. <header> <h1>empresa X</h1> </header>
<nav> O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. Isso pode ser aplicado no menu principal do site.
<nav> <nav> <ul> <li><a href="./">home</a></li> <li><a href="sobre">sobre</a></li> <li><a href="produtos">produtos</a></li> <li><a href="contato">contato</a></li> </ul> </nav>
<main> The main element is an exact analogue of ARIA's role="main", and is designed to show screenreaders and assistive technologies exactly where main content begins, so it can be a target for a "skip links" keyboard command, for example. Authors must not include more than one main element in a document. Authors must not include the main element as a descendant of an article, aside, footer, header or nav element.
<main> <!-- other content --> <main role="main"> <h1>skateboards</h1> <p>the skateboard is the way cool kids get around</p> <article> <h2>longboards</h2> <p>longboards are a type of skateboard with a longer wheelb ase and larger, softer wheels.</p> <p>... </p> </article> <article> <h2>electric Skateboards</h2> <p>these no longer require the propelling of the skateboard by means of the feet; rather an electric motor propels the boa rd, fed by an electric battery.</p> <p>... </p> </article> </main> <!-- other content -->
<section> A tag section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno.
<section> <section> <h1>primeiro Nível</h1> <section> <h1>segundo Nível</h1> <section> <h1>terceiro Nível</h1> </section> </section> </section>
<article> O elemento article representa uma parte da página que poderá ser distribuído e reutilizável em feeds, por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas um bloco de texto comum.
<article> <article> <header> <h4><a href="#comment-2" rel="bookmark">comment #2</a> by <a href="http://example.com/">jack Osborne</a></h4> <time datetime="2007-08-29t13:58z">august 29th, 2007 at 13:58</time> </header> <p>pellentesque habitant morbi tristique senectus et netus e t malesuada fames ac turpis egestas. Vestibulum tortor quam, fe ugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu li bero sit amet quam egestas semper. Aenean ultricies mi vitae es t. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, c ommodo vitae, ornare sit amet, wisi.</p>... </article>
<aside> O elemento aside representa um bloco de outro conteúdo que está relacionado ao conteúdo principal envolta dele. O aside pode ser representado por conteúdos em sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal do website.
<aside> <aside> <h2>blogroll</h2> <ul> <li><a href="#">meu amigo</a></li> <li><a href="#">meu outro amigo</a></li> <li><a href="#">meu melhor amigo</a></li> </ul> </aside>
<time> Este elemento serve para marcar uma parte do texto que exibe um horário ou uma data precisa. Agora é <time>21:00</time> do dia <time datetime="2013-09-10">1 0 de Setembro de 2013</time>. Ou não!
<footer> O elemento footer representa um rodapé, podendo ele estar se referindo a toda uma página, a uma seção ou até a outros elementos. <footer> CSS-Tricks* foi criado, é escrito por, e mantido por <a hre f="http://chriscoyier.net">chris Coyier</a>. É construído com < a href="http://wordpress.org/">wordpress</a>, hospedado na <a h ref="http://www.mediatemple.net/#a_aid=4e25c84480ed2">media Tem ple</a> e <a href="http://www.netdna.com/">netdna</a>, com font es da <a href="http://www.typography.com/">h&fj</a>. *Pode ou n ão conter algum "CSS" ou "Truques". </footer>
Formulários
E-mail <input type="email"> Enviar
Busca <input type="search"> Enviar
Data <input type="date" value="2013-09-10"> 10/09/2013 Enviar
Data e Hora Local <input type="datetime-local" value="2013-09-10t21:00"> 10/09/2013 21:00 Enviar
<input type="datetime"> Data e Hora Enviar
Mês <input type="month" value="2013-09"> setembro de 2013 Enviar
Semana <input type="week" value="2013-w37"> Semana 37, 2013 Enviar
Cor <input type="color" value="#7b7dcc"> Selecione uma cor: Enviar
Número <input type="number" min="1" max="10" step="1" value="4"> 4 Enviar
Alcance/Distância <input type="range" min="1" max="10" step="1" value="4"> Enviar
Outros elementos e atributos placeholder required pattern speech autofocus tel url progress figure figcaption
Áudio http://buzz.jaysalvat.com/ http://kolber.github.io/audiojs/
Vídeo http://www.videojs.com/ http://popcornjs.org/
SVG http://maujorsvg.com.br/ http://raphaeljs.com/
WebGL e Canvas http://threejs.org/
Prefixos dos Browsers.prefixos { -webkit-propriedade: valor; /* Webkit: Chrome, Safari */ -moz-propriedade: valor; /* Firefox */ -ms-propriedade: valor; /* Internet Explorer */ -o-propriedade: valor; /* Opera */ propriedade: valor; /* CSS3 */ }
border-radius.cantos-arredondados { -webkit-border-radius: 50px; border-radius: 50px; } Elemento com cantos arredondados
box-shadow.sombra { -webkit-box-shadow: 5px 5px 20px 5px #000; box-shadow: 5px 5px 20px 5px #000; } Elemento com sombra
text-shadow.sombra-no-texto { text-shadow: 5px 5px 5px red; } Elemento com sombra no texto
opacity.opacidade { opacity: 0.33; } Elemento com opacidade
rgba.opacidade-com-rgba { background-color: rgba(255, 192, 0); background-color: rgba(255, 192, 0, 0.33); } Elemento com opacidade
Outras propriedades border-image background-image: linear-gradient transform: rotate transform: scale transform: perspective transition box-sizing background-size font-face múltiplos backgrounds flexbox media queries
HTML5 Boilerplate http://html5boilerplate.com/
CSS3, please! http://css3please.com/
Posso usar? http://caniuse.com/
Modernizr http://modernizr.com/
Polyfills Um polyfill, ou polyfiller, é um pedaço de código (ou plugin) que provide a tecnologia que você, o desenvolvedor, espera que o navegador disponibilize nativamente. https://github.com/modernizr/modernizr/wiki/html5- Cross-Browser-Polyfills
HTML logo http://www.w3.org/html/logo/
The Expressive Web http://beta.theexpressiveweb.com/
Apostila HTML5 do W3C http://www.w3c.br/pub/cursos/cursohtml5/html5- web.pdf
Apostila CSS3 do W3C http://www.w3c.br/pub/cursos/cursocss3/css-web.pdf
Dive Into HTML5 http://diveintohtml5.com.br/
Guia de Referência do Tableless http://tableless.com.br/html5/
Curso em vídeo de HTML5 http://www.youtube.com/cursosemvideo
Obrigado! E-mail giovannipds@gmail.com Facebook fb.com/giovannipds Slides http://giovannipds.com.br/html5-e-css3/ Criado com reveal.js