• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

HTML5 & CSS3 - A Evolução da Web

on

  • 2,736 views

Palestra dada no evento The Developers Conference - TDC 2010 em Florianópolis.

Palestra dada no evento The Developers Conference - TDC 2010 em Florianópolis.

Statistics

Views

Total Views
2,736
Views on SlideShare
2,734
Embed Views
2

Actions

Likes
0
Downloads
136
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

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

    HTML5 & CSS3 - A Evolução da Web HTML5 & CSS3 - A Evolução da Web Presentation Transcript

    • HTML5 + CSS3
      Manoel dos Santos
      @manoeldossantos
      manoeldossantos@gmail.com
    • História
    • Evolução
      Web 1.0
      Linkar/encontrardocumentos
      Arquivosestruturados
      Web 2.0
      Interatividade
      Usuários e autores se misturam
      Web 3.0
      Ubiquidade
      Semântica
    • O Novo HTML
      Focoem Web Apps
      5
      Menordependência
      dos plugins
      MaisSemântico
      http://dev.w3.org/html5/spec-author-view/
    • Algumasmelhorias
      Mais simples
      <!DOCTYPE html>
      Maisclemente
      <img src=“imagem.jpg” />
      <img src=“imagem.jpg”>
      <img src=imagem.jpg>
      <IMG SRC=imagem.jpg>
    • O Velho
      <div id=“header”>
      <div class=“section”>
      <div id=“nav”>
      <div id=“sidebar”>
      <div class=“article”>
      <div id=“footer”>
    • O Novo
      <header>
      <section>
      <nav>
      <aside>
      <article>
      <footer>
    • Adeus
      <acronym>
      <basefont>
      <center>
      <font>
      <strike>
      <frame>

      http://www.w3schools.com/html5/html5_reference.asp
    • Bemvindos
      <canvas>
      <mark>
      <time>
      <video>
      <audio>
      <meter>

      http://www.w3schools.com/html5/html5_reference.asp
    • Formulários
      Novostipos de input
      Email, date, range, search, tel, number, color
      Novosatributos
      Required, min, max, placeholder, pattern
      Novoscomponentes
      Meter, progress, output
      http://www.w3.org/TR/html5/forms.html
      http://diveintohtml5.org/forms.html
    • Formulários
      DEMO
    • Mídia
      Áudio
      <audio id=“audio” src=“musica.mp3” controls></audio>
      Vídeo
      <video id=“video” src=“filme.mp4” controls></video>
      http://www.w3.org/TR/html5/video.html
      http://diveintohtml5.org/video.html
    • Vídeo
      DEMO
    • Canvas
      http://www.benjoffe.com/code/games/torus/
    • Novas APIs
      Geolocalização
      http://htmlfive.appspot.com/static/whereami.html
      Drag and Drop
      http://html5demos.com/drag
      Web Workers
      Javascriptem background
      Offline Storage / Web SQL Database
    • Mas, porém, entretanto…
      2012?!
    • Suporte
    • Suporte
    • Suporte
    • Suporte
    • Links
      http://slides.html5rocks.com/
      http://html5demos.com/
      http://html5doctor.com/
      http://www.apple.com/html5/
      http://www.nevermindthebullets.com/strip.html#1-1
      http://diveintohtml5.org/
      http://www.edesignerz.net/html/2913-html-5-and-css-3-the-techniques-youll-soon-be-using
    • O Novo CSS
      Menosimagens
      3
      Maiscontrole
      Modular
      http://www.w3.org/Style/CSS/current-work
    • Seletores
      :nth-child(n)
      :only-child
      :checked
      :not

      http://www.w3.org/TR/css3-selectors/
    • Opacidade e Alpha
      Opacidade
      opacity: 0.5;
      RGBA
      color: rgba(255,255,255,0.5);
      HSL/A
      color: hsla(360,50%,50%,0.5);
    • Background
      Tamanho
      background-size: 100px 50px;
      Múltiplasimagens
      background: url(imagem1.png) top left no-repeat, url(imagem2.png) bottom left no-repeat,url(imagem3.png) left repeat-y;
    • Bordas
      Múltiplasbordas
      border-color: #000 transparent transparent #000;
      Bordaarredondada
      border-radius: 10px;
      border-top-right-radius: 10px;
      -moz-border-radius: 10px;
      Imagem:
      border-image: url(borda.png) 27 27 27 27 stretch stretch;
    • Sombra
      Caixa
      box-shadow: 10px 10px 10px #000;
      Texto
      text-shadow: 10px 10px 10px #000;
    • Texto
      Overflow
      text-overflow: ellipsis;
      Colunas
      -*-column-count: 3;
      -*-column-width: 10em;
      -*-column-gap: 2em;
      -*-column-rule: 1px solid #000;
    • Fonte
      @font-face { font-family: Helvetica;src: url(HelveticaNeue.ttf); local(“Arial”);}
    • Movimento
      Transição
      Transformação 2D
      Transformação 3D
      Animação
    • Demo
      http://slides.html5rocks.com/#slide29
    • Suporte - Seletores
    • Suporte - Propriedades
    • Links
      http://www.456bereastreet.com/
      http://www.css3.info/
      http://www.findmebyip.com/litmus/#
      http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/
    • HTML5 + CSS3 - Cuidados
      Performance
      Muitoaindaemrascunho
      Suporte de navegadores
      Funcionalidadesproprietárias
    • HTML5 x Silverlight x Flash
      Tem lugarpratodomundo
      Público-alvo e projeto
      Web = HTML
      Crossbrowser, crossplatform
      Plugins (SL, Flash/Air, JavaFX…)
      Aplicações de nicho e de negócios
      Recursosavançados
      Webcam, microfone, webconference, fullscreen, etc…
    • Obrigado
      Perguntas?
      @manoeldossantos
      manoeldossantos@gmail.com