• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 

Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ

on

  • 2,444 views

Slides apresentados no 16 EDTED, edição Rio de Janeiro, em 21 de Maio de 2011.

Slides apresentados no 16 EDTED, edição Rio de Janeiro, em 21 de Maio de 2011.

Aqui não tem vídeos, animações e códigos apresentados, mas tem os links. Logo passo o link completo.

Statistics

Views

Total Views
2,444
Views on SlideShare
2,438
Embed Views
6

Actions

Likes
7
Downloads
45
Comments
3

4 Embeds 6

http://www.linkedin.com 3
http://twitter.com 1
http://paper.li 1
http://slidecastr.heroku.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ Presentation Transcript

    • Realize mais com HTML 5 e CSS 3 EDTED/RJ @leobalter
    • http://h5c3.heroku.com/logo/ @leobalter
    • SemânticaAPIs JavaScriptMídias (Vídeo e Áudio)WebForms 2.0CSS 3etc @leobalter
    • <!DOCTYPE html
    • <!doctype html><html lang=’pt-br’><head> <meta charset=”utf-8”> <title>yay!</title>... @leobalter
    • <!doctype html><html lang=’pt-br’><head> <meta charset=”utf-8”> <title>yay!</title>... @leobalter
    • <!doctype html><html lang=’pt-br’><head> <meta charset=”utf-8”> <title>yay!</title>... @leobalter
    • <!doctype html><html lang=’pt-br’><head> <meta charset=”utf-8”> <title>yay!</title>... @leobalter
    • @leobalter
    • @leobalter
    • HeaderNavSection AsideFooter @leobalter
    • HeaderNavSection AsideFooter @leobalter
    • HeaderNavSection Aside Article ArticleFooter @leobalter
    • Problemas no caminho! @leobalter
    • novos elementos não sãorenderizados como blocos! OMG! @leobalter
    • <!--[if IE]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><style>  article, aside, figure, footer, header, hgroup,  menu, nav, section { display: block; }</style> @leobalter
    • <!--[if IE]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><style>  article, aside, figure, footer, header, hgroup,  menu, nav, section { display: block; }</style> @leobalter
    • <!--[if IE]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><style>  article, aside, figure, footer, header, hgroup,  menu, nav, section { display: block; }</style> @leobalter
    • <!--[if IE]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><style>  article, aside, figure, footer, header, hgroup,  menu, nav, section { display: block; }</style> @leobalter
    • document.createElement(‘header’);document.createElement(‘section’);... @leobalter
    • Encurtando o caminho... @leobalter
    • http://www.modernizr.com/ @leobalter
    • http://www.html5boilerplate/ @leobalter
    • @leobalter
    • <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]--><!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"><!--<![endif]--> .box { float: left; margin-left: 20px; } .ie6 .box { margin-left: 10px; } @leobalter
    • <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]--><!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"><!--<![endif]--> .box { float: left; margin-left: 20px; } .ie6 .box { margin-left: 10px; } @leobalter
    • <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]--><!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"><!--<![endif]--> .box { float: left; margin-left: 20px; } .ie6 .box { margin-left: 10px; } @leobalter
    • <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]--><!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"><!--<![endif]--> .box { float: left; margin-left: 20px; } .ie6 .box { margin-left: 10px; } @leobalter
    • <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]--><!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"><!--<![endif]--> .box { float: left; margin-left: 20px; } .ie6 .box { margin-left: 10px; } @leobalter
    • <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]--><!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"><!--<![endif]--> .box { float: left; margin-left: 20px; } .ie6 .box { margin-left: 10px; } @leobalter
    • sem utilização de hakcs de CSSSem estilos dentro de condicionais @leobalter
    • #elemento { padding-right: 0; _padding-right: 10px; }sem utilização de hakcs de CSSSem estilos dentro de condicionais @leobalter
    • #elemento { padding-right: 0; _padding-right: 10px; }sem utilização de hakcs de CSSSem estilos dentro de condicionais<!--[if lt IE 7 ]> <link href=”ie6.css” /><![endif]--> @leobalter
    • Polyfills! @leobalter
    • http://goo.gl/KjSdM
    • http://goo.gl/KjSdM
    • HTML 5 Formshttp://dl.dropbox.com/u/598365/html5forms/html5forms.html @leobalter
    • Show me the code! @leobalter
    • Seletores CSS3http://tools.css3.info/selectors-test/test.html @leobalter
    • Propriedades CSS3http://www.css3.info/preview/ @leobalter
    • http://css3pie.com/ @leobalter
    • Media Queries @leobalter
    • <link rel="stylesheet" href="test.css" media="screen" /><link rel="stylesheet" href="print.css" media="print" /> @leobalter
    • <link rel="stylesheet" href="test.css" media="screen" /><link rel="stylesheet" href="print.css" media="print" /> @leobalter
    • <link rel="stylesheet" href="test.css" media="screen" /><link rel="stylesheet" href="print.css" media="print" /> @leobalter
    • <link rel="stylesheet" href="test.css" media="screen" /><link rel="stylesheet" href="print.css" media="print" /> @leobalter
    • http://www.thecssninja.com/demo/css_chameleon/ @leobalter
    • /* Portrait */@media screen and (orientation:portrait) {! body { opacity: 1; }}/* Landscape */@media screen and (orientation:landscape) {! body { opacity: 0; }} @leobalter
    • /* Portrait */@media screen and (orientation:portrait) {! body { opacity: 1; }}/* Landscape */@media screen and (orientation:landscape) {! body { opacity: 0; }} @leobalter
    • /* Portrait */@media screen and (orientation:portrait) {! body { opacity: 1; }}/* Landscape */@media screen and (orientation:landscape) {! body { opacity: 0; }} @leobalter
    • /* Portrait */@media screen and (orientation:portrait) {! body { opacity: 1; }}/* Landscape */@media screen and (orientation:landscape) {! body { opacity: 0; }} @leobalter
    • @media screen and (max-device-width: 480px) {! html, body {! ! -moz-background-size: 80% auto;! ! -webkit-background-size: 80% auto;! ! background-size: 80% auto;! }} @leobalter
    • @media screen and (max-device-width: 480px) {! html, body {! ! -moz-background-size: 80% auto;! ! -webkit-background-size: 80% auto;! ! background-size: 80% auto;! }} @leobalter
    • @media screen and (max-device-width: 480px) {! html, body {! ! -moz-background-size: 80% auto;! ! -webkit-background-size: 80% auto;! ! background-size: 80% auto;! }} @leobalter
    • @media screen and (max-device-width: 480px) {! html, body {! ! -moz-background-size: 80% auto;! ! -webkit-background-size: 80% auto;! ! background-size: 80% auto;! }} @leobalter
    • @media screen and (max-device-width: 480px) {! html, body {! ! -moz-background-size: 80% auto;! ! -webkit-background-size: 80% auto;! ! background-size: 80% auto;! }} @leobalter
    • http://jasonweaver.name/
    • @font-face @leobalter
    • @font-face { font-family: ActionManRegular; src: url(Action_Man-webfont.eot); src: url(Action_Man-webfont.eot?#iefix) format(embedded-opentype), url(Action_Man-webfont.woff) format(woff), url(Action_Man-webfont.ttf) format(truetype), url(Action_Man-webfont.svg#ActionManRegular) format(svg); font-weight: normal; font-style: normal;} @leobalter
    • @leobalter
    • @leobalter
    • Geolocation @leobalter
    • maps.google.com @leobalter
    • maps.google.com @leobalter
    • http://code.google.com/apis/maps/index.html @leobalter
    • Vídeos! @leobalter
    • <video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p></video> @leobalter
    • <video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p></video> @leobalter
    • <video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p></video> @leobalter
    • <video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p></video> @leobalter
    • <video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p></video> @leobalter
    • <video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p></video> @leobalter
    • <video preload controls autoplay> <source src="video.m4v" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> <p>cade seu browser novo?</p></video> @leobalter
    • http://popcornjs.org @leobalter
    • @leobalter
    • E os jogos? @leobalter
    • chrome.angrybirds.com
    • Obrigado!leo@balter.com.br @leobalter