HTML5 e as novas tecnologias de desenvolvimento web

  • 7,835 views
Uploaded on

O HTML 5 é a nova especificação do HTML em desenvolvimento pelo W3C e propõe melhorias à semântica, uso de hipermídia, usabilidade e acessibilidade de páginas web, juntamente com outras linguagens …

O HTML 5 é a nova especificação do HTML em desenvolvimento pelo W3C e propõe melhorias à semântica, uso de hipermídia, usabilidade e acessibilidade de páginas web, juntamente com outras linguagens como CSS e JavaScript. Nesta palestra serão abordadas as principais mudanças semânticas de elementos e atributos, o que muda com o HTML 5 em termos de padrões web, as tecnologias adjacentes que atuam em conjunto com a linguagem e alguns exemplos de aplicações e jogos desenvolvidos em HTML 5.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,835
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
316
Comments
0
Likes
14

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. E as novas tecnologias de desenvolvimento web
    Talita pagani – dc/ufscar - @talitapagani maio/2011
  • 2. So, Ozzy, what do youthinkaboutHTML5?
    Whatthe f*** isHTML5?
    2
    De 52
  • 3. Agenda
    Apresentação
    Evolução do HTML
    Como começou o HTML5: WHATWG e W3C
    O que o HTML5 traz de novo
    HTML5 X HTML 4.1 e XHTML 1.0
    O que não é HTML5
    Novas tags e atributos
    Tecnologias adjacentes
    Flash x HTML5
    Posso usar o HTML5 hoje?
    Referências
    3
    De 52
  • 4. Apresentação
    Talita Pagani
    Bacharel em Ciência da Computação pela USC
    Mestranda em Ciência da Computação na UFSCar
    Designer de Interface desde 2005
    Trabalha com usabilidade, qualidade em uso, interfaces ricas, CSS e HTML
    Editora regular do site Tableless – Padrões Web e blog WebDesign Experience
    4
    De 52
  • 5. Evolução do HTML
    5
    De 52
  • 6. Como começou o HTML5: WHATWG e W3C
    Criação do Grupo WHATWG (http://www.whatwg.org/)
    Web Hypertext Application Technology Working Group
    Fundado por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004
    Não estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML
    Em 2006, o trabalho do WHATWG passou ser conhecido pelo mundo e principalmente pelo W3C
    XHTML 2 foi descontinuado em 2009
    6
    De 52
  • 7. O que o HTML5 traz de novo
    Conectividade e aplicações de tempo real
    Novas possibilidades de estilo com CSS3
    Acesso à dispositivos (interoperabilidade)
    Gráficos 2D, 3D e efeitos
    Recursos multimídia
    Melhor performance e integração
    Elementos mais semânticos
    Armazenamento off-line
    7
    De 52
  • 8. O que o html5 traz de novo
    simplicidade
    8
    De 52
  • 9. A tríade do desenvolvimento web
    9
    De 52
  • 10. HTML5 X HTML 4.1:Elementos descontinuados
    Os elementos abaixo foram descontinuados por que seus efeitos são apenas visuais:
    basefont
    big
    center
    font
    s
    strike
    tt
    u
    Atributos substituídos pois modificam a formatação dos elementos
    align
    background
    bgcolor
    border
    cellpadding
    cellspacing
    10
    De 52
  • 11. HTML5 X HTML 4.1:NOVOS VALORES DE INPUTS
    tel
    search
    url
    email
    datetime
    date
    month
    week
    time
    datetime-local
    number
    range
    color
    11
    De 52
  • 12. HTML5 X HTML 4.1:Elementos substituídos
    12
    De 52
  • 13. HTML5 permite a mesma sintaxe do HTML
    Tags sem fechamento
    Tags em maiúscula
    Valores de atributos sem aspas
    HTML5 X XHTML
    13
    De 52
  • 14. O QUE NÃO É html5
    <!DOCTYPE html>
    CSS3
    SVG
    14
    De 52
  • 15. Novas tags e Atributos
    <header> / <footer>
    <nav>
    <article> / <section> / <aside>
    <hgroup>
    15
    De 52
  • 16. Novas tags e Atributos
    <figure>
    <figcaption>
    <details>
    <summary>
    <dialog>
    16
    De 52
  • 17. Novas tags e atributos
    <audio>
    <video>
    <audiosrc="music.oga" controls> <a href="music.oga">Download song</a> </audio>
    <videosrc="video.ogv" controlsposter="poster.jpg" width="320" height="240">
    <a href="video.ogv">Download movie</a>
    </video>
    17
    De 52
  • 18. Novas tags e Atributos
    18
    De 52
  • 19. 19
    De 52
  • 20. Tecnologias adjacentes
    20
    De 52
  • 21. TECNOLOGIAS ADJACENTES
    SVG
    Gráfico Vetorial Escalar
    Padrão da W3C para gráficos vetoriais independente do HTML5
    Arquivos menores
    Não degradam quando escalados
    21
    De 52
  • 22. Diferenças entre bitmap e svg
    Fonte: www.maujorsvg.com.br
    22
    De 52
  • 23. TECNOLOGIAS ADJACENTES
    Canvas
    Também trabalha com gráficos, porém bitmap
    Faz parte do HTML5
    Gráficos com HTML5 + JS (sem API)
    http://www.mutantzombiemonsters.com
    http://slides.html5rocks.com/#canvas-2d-example
    http://slides.html5rocks.com/#canvas-3d
    <canvasheight=“600” width=“800”></canvas>
    23
    De 52
  • 24. TECNOLOGIAS ADJACENTES
    CSS3
    Maior controle de formas e efeitos
    Maior independência do uso de imagens, principalmente PNG para criar transparências
    Estilizar elementos de acordo com determinados atributos da tag HTML
    Concentrar a formatação cada vez mais apenas no CSS, diminuindo o uso de imagens e scripts
    24
    De 52
  • 25. TECNOLOGIAS ADJACENTES
    Cantos arredondados: border-radius
    #div1 { 
    border: 1px solid #699; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 

    25
    De 52
  • 26. TECNOLOGIAS ADJACENTES
    Sombras em elementos de bloco: box-shadow
    #div2 { 
    border: 1px solid #699; 
    -moz-box-shadow: 5px 5px 5px #b6ebf7; 
    -webkit-box-shadow: 5px 5px 5px #b6ebf7; 

    26
    De 52
  • 27. TECNOLOGIAS ADJACENTES
    Sombras em textos: text-shadow
    p.shadow {
    text-shadow: 2px 2px2px #000;
    }
    27
    De 52
  • 28. TECNOLOGIAS ADJACENTES
    Transparência: opacity e rgba
    #div3 { 
    background-color: rgba(110, 142, 185, .4); 

    #div3 { 
    background-color: #6e8eb9; 
    opacity: 0.4;

    28
    De 52
  • 29. TECNOLOGIAS ADJACENTES
    Colunas: column-count, column-gap, column-rule
    #div4 { 
    /* borda inserida para facilitar o entedimento */ 
    border: 1px solid #699; 
    -moz-column-count: 2; 
    -moz-column-gap: 20px; 
    -moz-column-rule: 1px solid #6e8eb9; 
     
    -webkit-column-count: 2; 
    -webkit-column-gap: 20px; 
    -webkit-column-rule: 1px solid #6e8eb9; 

    29
    De 52
  • 30. TECNOLOGIAS ADJACENTES
    Múltiplos backgrounds: separar os backgrounds por vírgula
    #div5 blockquote{ 
    background: url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%; 

    30
    De 52
  • 31. TECNOLOGIAS ADJACENTES
    Background com gradiente: linear-gradient, gradient
    #div8 { 
    background: -moz-linear-gradient(bottom, #b6ebf7, #fff 50%); 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff)); 

    31
    De 52
  • 32. TECNOLOGIAS ADJACENTES
    Rotacionar elementos: transform
    #div9 { 
    -moz-transform: rotate(2deg); 
    -webkit-transform: rotate(2deg); 
    }
    32
    De 52
  • 33. TECNOLOGIAS ADJACENTES
    Seletores por atributos
    elemento[atributo=valor]
    input[type=“text”]
    div[title=“abc”]
    :not()
    div.teste :not(span)
    tabletrtd :not(:last-child)
    :last-child
    ol.teste li:last-child
    :empty
    p:empty
    E muitos outros
    33
    De 52
  • 34. TECNOLOGIAS ADJACENTES
    APIsJavaScript (aí sim!)
    DragandDrop nativo
    Geolocalização
    Web Storage
    Web SQL Database
    Notificações
    Etc...
    34
    De 52
  • 35. TECNOLOGIAS ADJACENTES
    Draganddrop nativo
    Nas páginas
    Do desktop para uma página web
    http://slides.html5rocks.com/#drag-and-drop
    35
    De 52
  • 36. TECNOLOGIAS ADJACENTES
    Geolocalização
    Rastreamento da localização física do usuário
    Utiliza a API do Google Maps de modo mais simples
    Quase um GPS disponível para qualquer dispositivo
    http://studio.html5rocks.com/#Geolocation
    36
    De 52
  • 37. TECNOLOGIAS ADJACENTES
    Web Storage
    Mecanismo similar aos cookies, para armazenar dados no cliente
    SessionStorage
    Local Storage
    http://playground.html5rocks.com/#localstorage
    http://slides.html5rocks.com/#web-storage
    37
    De 52
  • 38. TECNOLOGIAS ADJACENTES
    Notificações
    Notificações em tempo real na área de trabalho
    Múltiplas possibilidades
    http://slides.html5rocks.com/#notifications-api
    38
    De 52
  • 39. Tecnologias adjacentes
    Caching
    http://slides.html5rocks.com/#app-cache
    39
    De 52
  • 40. HTML5 x FLASH
    40
    De 52
  • 41. Flash x html5
    O HTML 5 NÃO vai tomar o lugar do Flash, entretanto, o Flash NÃOserá a ÚNICA opção!
    41
    De 52
  • 42. Flash x html5
    Era dos sites ultra animados já passou (será?)
    Mas Flash ainda continuará a ser utilizado
    Foco da web é conteúdo
    Semântico
    Acessível
    Mas HTML tem que ser bem utilizado
    42
    De 52
  • 43. Posso usar o HTML5 hoje?
    43
    De 52
  • 44. Posso Usar o html5 hoje?
    Depende do projeto e público-alvo
    44
    De 52
  • 45. Posso usar o html5 hoje?
    http://www.findmebyip.com/litmus/
    Mas como eu faço pra saber qual o suporte dos browsers ao HTML5?
    45
    De 52
  • 46. Posso usar o html5 hoje?
    2 opções
    Mas... e seu quiser fazer meu site em HTML5 funcionar no IE 7 e 8?
    46
    De 52
  • 47. <!--[if lteIE 8]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    http://www.modernizr.com/
    47
    De 52
  • 48. Referências
    http://www.w3.org/html/logo/
    http://maujorsvg.com.br/
    http://www.tableless.com.br/html5-diff
    http://www.tableless.com.br/contedo-flash-e-html
    http://www.slideshare.net/1Marc/html5-essentials
    http://www.slideshare.net/robhawkes/html5-canvas-the-future-of-graphics-on-the-web
    http://www.tableless.com.br/html5-estrutura-semantica
    48
    De 52
  • 49. Referências
    http://www.slideshare.net/edu_agni/css3-seu-desenho-vai-virar-cdigo-e-agora
    http://tableless.com.br/html5/
    http://www.tableless.com.br/afinal-o-que-muda-com-o-html-5
    http://www.tableless.com.br/html-5-novos-elementos-e-atributos
    http://www.tableless.com.br/html5-brevissima-introducao
    49
    De 52
  • 50. Referências
    http://planetoftheweb.com/components/promos.php?id=556
    http://playground.html5rocks.com
    http://www.alistapart.com/articles/previewofhtml5/
    http://html5doctor.com
    http://html5demos.com/
    http://www.canvasdemos.com
    50
    De 52
  • 51. Perguntas?
    51
    De 52
  • 52. www.talitapagani.com | talita.cpb@gmail.com | www.twitter.com/talitapagani
    Obrigada!
    52
    De 52