HTML5 e CSS3. Giovanni Pires da Silva. IIª Jornada Acadêmica Curso de ADS - IFRS

Tamanho: px

Começar a partir da página:

Download "HTML5 e CSS3. Giovanni Pires da Silva. IIª Jornada Acadêmica Curso de ADS - IFRS"

Cacilda Ramalho de Caminha
8 Há anos
Visualizações:

1 HTML5 e CSS3 Giovanni Pires da Silva IIª Jornada Acadêmica Curso de ADS - IFRS

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

0, PHP, ActionScript 2.0, XML, MySQL, jquery, ActionScript 3.

4 Esta apresentação NÃO CONTÉM todo o conteúdo de HTML5 e CSS3

5 Desenvolvimento Web Front-end Back-end

6 Desenvolvimento em Camadas Informação: HTML Formatação: CSS Comportamento: JavaScript

8 Modular

9 Em Desenvolvimento

10 Semântico

11 div#cabecalho div#menu div#conteudo div#lateral div#rodape

12 div div div div div

13 header#cabecalho nav#menu main#conteudo aside#lateral footer#rodape

14 header nav main aside footer

15 Estrutura básica e inicial

16 DOCTYPE Antes, XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" lang="pt-br">... Agora, HTML5: <!doctype html> <html lang="pt-br">...

17 Charset Antes, XHTML: <meta http-equiv="content-type" content="text/html; charset=utf-8 " /> Agora, HTML5 <meta charset="utf-8">

18 Elementos modificados <b> <i> <strong> e outros...

19 Elementos descontinuados <hgroup> <basefont> <big> <center> <font> <s> <strike> <tt> <u> <frame> <frameset> <noframes> <acronym> <applet> <isindex> <dir>

20 Novos elementos

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

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

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

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

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

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

27 <section> <section> <h1>primeiro Nível</h1> <section> <h1>segundo Nível</h1> <section> <h1>terceiro Nível</h1> </section> </section> </section>

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

29 <article> <article> <header> <h4><a href="#comment-2" rel="bookmark">comment #2</a> by <a href=" Osborne</a></h4> <time datetime=" t13: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>

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

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

32 <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=" ">1 0 de Setembro de 2013</time>. Ou não!

33 <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=" Coyier</a>. É construído com < a href=" hospedado na <a h ref=" Tem ple</a> e <a href=" com font es da <a href=" *Pode ou n ão conter algum "CSS" ou "Truques". </footer>

34 Formulários

35 <input type=" "> Enviar

36 Busca <input type="search"> Enviar

37 Data <input type="date" value=" "> 10/09/2013 Enviar

38 Data e Hora Local <input type="datetime-local" value=" t21:00"> 10/09/ :00 Enviar

39 <input type="datetime"> Data e Hora Enviar

40 Mês <input type="month" value=" "> setembro de 2013 Enviar

41 Semana <input type="week" value="2013-w37"> Semana 37, 2013 Enviar

42 Cor <input type="color" value="#7b7dcc"> Selecione uma cor: Enviar

43 Número <input type="number" min="1" max="10" step="1" value="4"> 4 Enviar

44 Alcance/Distância <input type="range" min="1" max="10" step="1" value="4"> Enviar

45 Outros elementos e atributos placeholder required pattern speech autofocus tel url progress figure figcaption

46 Áudio

47 Vídeo

48 SVG

49 WebGL e Canvas

51 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 */ }

52 border-radius.cantos-arredondados { -webkit-border-radius: 50px; border-radius: 50px; } Elemento com cantos arredondados

53 box-shadow.sombra { -webkit-box-shadow: 5px 5px 20px 5px #000; box-shadow: 5px 5px 20px 5px #000; } Elemento com sombra

54 text-shadow.sombra-no-texto { text-shadow: 5px 5px 5px red; } Elemento com sombra no texto

55 opacity.opacidade { opacity: 0.33; } Elemento com opacidade

56 rgba.opacidade-com-rgba { background-color: rgba(255, 192, 0); background-color: rgba(255, 192, 0, 0.33); } Elemento com opacidade

57 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

58 HTML5 Boilerplate

59 CSS3, please!

60 Posso usar?

61 Modernizr

62 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. Cross-Browser-Polyfills

63 HTML logo

64 The Expressive Web

65 Apostila HTML5 do W3C web.pdf

66 Apostila CSS3 do W3C

67 Dive Into HTML5

68 Guia de Referência do Tableless

69 Curso em vídeo de HTML5

70 Obrigado! Facebook fb.com/giovannipds Slides Criado com reveal.js

Documentos relacionados

Daniel Röhers Moura. Software HandsOn.TV. danielrohers

Daniel Röhers Moura. Software HandsOn.TV. danielrohers Daniel Röhers Moura Software Engineer @ HandsOn.TV rohersmoura@gmail.com danielrohers 1 HTML o que? HTML5 é a nova versão do HTML, simples assim! :) Foi lançada em 2008 e traz consigo importantes mudanças