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

Realize mais com HTML 5 e CSS 3 - EDTED / RS

on

  • 1,528 views

 

Statistics

Views

Total Views
1,528
Views on SlideShare
1,528
Embed Views
0

Actions

Likes
1
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • 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 - EDTED / RS Realize mais com HTML 5 e CSS 3 - EDTED / RS Presentation Transcript

    • HTML 5 & CSS 3 16 EDTED - POA Leo Balter
    • QUEM É @LEOBALTER?• Pós Graduação de Engenharia de Software• Frontend na Intervir• Desconferência
    • • Precisamos sentir a internet
    • •A internet deve interagir com a gente
    • @LEOBALTER
    • Uma web para todos, onde a comunidadepode participar abertamente e todospodem empreender em igualdade. Semlimitações de sistemas proprietários...
    • O HTML 5 é agora e não depois, não perca tempo!
    • <!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
    • <header><nav><section> <aside> <article> <article><footer> @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
    • Encurtando o caminho...
    • http://www.modernizr.com/
    • http://html5boilerplate.com/ @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
    • O melhor hack é não precisar de hacks @leobalter
    • #elemento { padding-right: 0; _padding-right: 10px; }O melhor hack é não precisar de hacks @leobalter
    • #elemento { padding-right: 0; _padding-right: 10px; }O melhor hack é não precisar de hacks <!--[if lt IE 7 ]> <link href=”ie6.css” /> <![endif]--> @leobalter
    • ProgressiveEnhancement & Polyfills!
    • http://goo.gl/KjSdM
    • http://goo.gl/KjSdM
    • CSS 3
    • http://goo.gl/0z6WQ
    • http://goo.gl/WWYtR
    • http://css3pie.com/ @leobalter
    • Media Queries Com o media queries seu site vaiimpressionar diversas mídias como um camaleão
    • http://goo.gl/DWOJj @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://mediaqueri.es/
    • @font-facenão é mais um truque, é uma realidade!
    • @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
    • é muito fácil utilizar @font-face mastemos ferramentas que tornam isso ainda mais simples @leobalter
    • http://fontsquirrel.com @leobalter
    • http://goo.gl/atq0A @leobalter
    • <link href=http://fonts.googleapis.com/css?family=Zeyada rel=stylesheet type=text/css><style>body { font-family: ‘Zeyada’, serif;}</style>
    • Podemos carregar várias fontes juntas pelo Google Web Fonts:http://fonts.googleapis.com/css?family=Zeyada|Droid+Sans
    • Também podemos carregar só o texto a ser utilizado para otimizar a nossa performance!http://fonts.googleapis.com/css?family=Droid+Sans&text=Olá
    • Drag & Drop File Api
    • http://min.us @leobalter
    • Geolocationa gente já sabe onde você está, e você?
    • http://maps.google.com @leobalter
    • http://maps.google.com @leobalter
    • Google Maps API Family http://goo.gl/sTm1a @leobalter
    • Vídeos!
    • <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
    • Bocoup!http://popcornjs.org
    • @LEOBALTER
    • SVGpodemos ir muito além de uma marcação tradicional
    • Canvas & WebGL a última pá de cal no flash!
    • http://pepetz.com
    • Querojogar!
    • http://helloracer.com/webgl/
    • chrome.angrybirds.com
    • Já passamos há muito tempoda web 2.0, estamos na web 8 com HTML 5 e CSS 3
    • Obrigado! http://goo.gl/QJpOfleo@balter.com.br @leobalter