EDTED SP - HTML 5 e CSS 3 - Junho de 2011
Upcoming SlideShare
Loading in...5
×
 

EDTED SP - HTML 5 e CSS 3 - Junho de 2011

on

  • 2,532 views

Palestra apresentada no EDTED de SP sobre HTML 5 e CSS 3. Tema: "Realize mais com HTML 5 e CSS 3". Público super bacana!...

Palestra apresentada no EDTED de SP sobre HTML 5 e CSS 3. Tema: "Realize mais com HTML 5 e CSS 3". Público super bacana!

Qualquer pergunta, sugestão, etc entre em contato: @leobalter ou leo@balter.com.br

Statistics

Views

Total Views
2,532
Views on SlideShare
2,446
Embed Views
86

Actions

Likes
7
Downloads
62
Comments
1

4 Embeds 86

http://www.rafaeldesigner.com.br 51
http://paper.li 27
http://www.slideshare.net 7
http://us-w1.rockmelt.com 1

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

EDTED SP - HTML 5 e CSS 3 - Junho de 2011 EDTED SP - HTML 5 e CSS 3 - Junho de 2011 Presentation Transcript

  • Leo Balter @leobalter
  • sim, esse slide vai estar online com todos os links!
  • @leobalter
  • @leobalter
  • @leobalter
  • #leotroll @leobalter
  • O HTML 5 é agora e não depois, não perca tempo! @leobalter
  • <!DOCTYPE html
  • <!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
  • Encurtando o caminho... @leobalter
  • 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
  • #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! @leobalter
  • http://goo.gl/KjSdM
  • CSS 3
  • Seletores CSS3tudo tem que ser encontrado @leobalter
  • Selectors test: http://goo.gl/IM0tc
  • http://goo.gl/WWYtR
  • Propriedades CSS3 sua página não precisa ser tão quadrada Leia também: http://goo.gl/9Ijci http://www.css3.info/preview/ @leobalter
  • http://goo.gl/E5OxD
  • http://css3pie.com/ @leobalter
  • Media QueriesCom o media queries seu site vai impressionar diversas mídias como um camaleão @leobalter
  • http://goo.gl/DWOJj @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
  • http://jasonweaver.name/
  • http://mediaqueri.es/
  • @font-facenão é mais um truque, é uma realidade! @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;} http://h5c3.heroku.com/fontface @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 @leobalter
  • http://min.us @leobalter
  • Geolocationa gente já sabe onde você está, e você? @leobalter
  • http://maps.google.com @leobalter
  • Google Maps API Family http://goo.gl/sTm1a @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
  • Bocoup!http://popcornjs.org @leobalter
  • @leobalter
  • Canvas & WebGL a última pá de cal no flash! @leobalter
  • http://pepetz.com
  • http://goo.gl/jWUfu
  • Quero jogar! @leobalter
  • http://helloracer.com/webgl/
  • chrome.angrybirds.com
  • Já é muito fácil criar animações em HTML 5, por exemplo: Hype Hype
  • Já passamos há muito tempo da web 2.0, estamos na web 8 com HTML 5 e CSS 3
  • Obrigado!leo@balter.com.br @leobalter