SlideShare uma empresa Scribd logo
1 de 85
Baixar para ler offline
HTML/HTTP
  e a Web
Willian Massami Watanabe



           1
Objetivo


Analisar a evolução das tecnologias web




                   2
Sumário

• HTML e HTTP
• Web 2.0
• HTML5
• Impactos na Engenharia Web

                   3
HTML e HTTP



     4
HTML e HTTP




     5
HTML e HTTP




     5
HTML e HTTP




     5
HTML e HTTP




     5
HTML e HTTP




     5
HTML e HTTP




     5
HTML e HTTP




     6
HTML e HTTP




     7
HTML e HTTP


  WWW


     8
HTML e HTTP

     WWW
Como isso começou?
        9
HTML e HTTP


  WWW


     10
HTML e HTTP


 Tim Berners Lee


  WWW
        11
HTML e HTTP
1989                       Hoje

  HTML
       HTTP

         Browser


                        Tim Berners Lee
                   12
HTML e HTTP
     1989               Hoje


 1945: Memory
   Extension
1960s: Hypertext
 1974: Internet



                   13
HTML e HTTP
     1989                           Hoje


 1945: Memory
   Extension
1960s: Hypertext
 1974: Internet

                        Memex
                                Vannevar Bush
                   14
HTML e HTTP
     1989                       Hoje


 1945: Memory
   Extension
1960s: Hypertext
 1974: Internet

                        Hypertext
                   15
HTML e HTTP
1989                       Hoje

  HTML
       HTTP

         Browser


                        Tim Berners Lee
                   16
HTML e HTTP
1989                         Hoje

  HTML       Hipertexto

  HTTP

 Browser
                          Tim Berners Lee
                   17
HTML e HTTP
   HTML


HyperText Markup Language: para organizar o
              conhecimento




                          Tim Berners Lee
                    18
HTML e HTTP
     1989                          Hoje


 1945: Memory
   Extension
1960s: Hypertext
 1974: Internet

                        Internet
                   19
HTML e HTTP




          Internet
     20
HTML e HTTP

  Aplicação
Apresentação
   Sessão
 Transporte
    Rede
   Enlace
    Físico
                    Internet
               21
HTML e HTTP

  Aplicação          HTTP
Apresentação
   Sessão
 Transporte
    Rede
   Enlace
    Físico
                    Internet
               22
HTML e HTTP
1989                        Hoje

  HTML

  HTTP       Protocolo

 Browser
                         Tim Berners Lee
                   23
HTML e HTTP
1989                         Hoje

  HTML

  HTTP

 Browser     Interface
                          Tim Berners Lee
                     24
HTML



 HTTP



Browser




          25
HTML e HTTP
1989                    Hoje

  HTML
       HTTP              WWW
         Browser



                   26
HTML e HTTP

   Por quê?




           Tim Berners Lee
      27
HTML e HTTP


Frustration



              Tim Berners Lee
        28
HTML e HTTP
Frustration



        Documentos



                          Tim Berners Lee
                     29
HTML e HTTP
Frustration



        Documentos



                          Tim Berners Lee
                     30
HTML e HTTP
Frustration



        Documentos



                          Tim Berners Lee
                     31
HTML e HTTP
Frustration

       !=       !=

        Documentos



                          Tim Berners Lee
                     32
HTML e HTTP




Hipertexto não foi a
     inovação
                       Tim Berners Lee
                  33
HTML



 HTTP



Browser




          34
HTML      Documentos Distribuídos



 HTTP



Browser




           34
HTML e HTTP




Interoperabilidade

        35
HTML e HTTP
1989                    Hoje

  HTML
       HTTP

         Browser



                   36
HTML e HTTP
1989                              Hoje

  HTML                HTML


  HTTP

                     JavaScript     CSS
 Browser

                37
HTML e HTTP
1989                        Hoje

  HTML

  HTTP

 Browser
                     HTML
                38
HTML e HTTP
1989                 Hoje

  HTML

  HTTP

 Browser

                39
HTML e HTTP
1989                    Hoje

  HTML
       HTTP

         Browser



                   40
Web 2.0



   41
Web 2.0

   Web humana



Web como plataforma



         42
Web 2.0
Web humana




             43
Web 2.0
     Web humana




Autor de      HTML     Usuários
conteúdo
                  44
Web 2.0
      Web humana




         HTML             Usuários
Usuário participando da autoria de conteúdo
   Redes sociais como Orkut, Twitter, ...
                     45
Web 2.0
Web humana

Usabilidade




          HTML
            46
                 Usuários
Web 2.0
Usabilidade


• Melhorar a experiência do usuário
  • Satisfação
  • Eficiência
  • Eficácia


                    47
Web 2.0
Usabilidade


                Ajax

Estilo arquitetural composto por diferentes idéias e
      tenologias associadas (Mahemoff, 2006)
  Emprego de tecnologias abertas com base em
   padrões arquiteturais da Internet e da Web
     (Garrett, 2005)(Fraternali et al., 2010)
                        48
Web 2.0


  Ajax




   49
Web 2.0

JavaScript e DHTML




        50
Web 2.0


JavaScript          Ajax              HTML


 HTML Events
                                     CSS
                             DHTML
             DOM HTML
                        51
Web 2.0

            JavaScript

Formatos de comunicação de dados




                52
Web 2.0

    SVG


JavaScript          Ajax                    HTML
                                     XML
  HTML Events
                                           CSS
                             DHTML
JSON         DOM HTML
                        53
Web 2.0

            JavaScript

 Formatos de comunicação de dados

Protocolo de comunicação HTTP




                54
Web 2.0
.net          JAVA                         RUBY
                     PHP          Python
        SVG

  JavaScript         Ajax               HTML
                                  XML
       HTML Events
                                      CSS
                              DHTML
 JSON         DOM HTML
                         55
Web 2.0


  Ajax




   56
Web 2.0

   Web humana



Web como plataforma



         57
Web 2.0
Web como plataforma


            Web
           mashups

  Reutilização de conteúdo web disponíveis
             em outras aplicações

                     58
Web 2.0
Web como plataforma


               Web
                                 Ajax
              mashups

RPC
      RestFul            XML SVG JSON

Webservices               RSS   Schema
                    59
Web 2.0
Web como plataforma


          Web
         mashups


    Reutilização
      Performance
                   60
HTML5



  61
HTML5
1989                           Hoje

  HTML             HTML


  HTTP

                  JavaScript     CSS
 Browser

             62
HTML5

JavaScript

 HTML

 CSS 3




    63
HTML5
JavaScript
  •  Armazenamento no Cliente (Web SQL
     Database, App Cache, Web Storage)
  • Communicação (Web Sockets, Worker
      Workers)
  • Interação com o Usuário (Notifications,
      Drag and Drop API)
  • Geolocalização
                           64
HTML5
HTML
• Semântica (New tags, Link Relations,
  Microdata)
• Acessibilidade (ARIA roles)
• Formulário Web 2.0 (Input Fields)
• Multimídia (Audio Tag,Video Tag)
• Desenhos 2D and 3D (Canvas, WebGL, SVG)
                      65
HTML5
CSS 3


• Tipografia (Text-shadow, font face)
• Novos elementos visuais (RGBA, Border
  Radius, Gradient)
• Transição, transformação e animação

                      66
HTML5




  67
Impactos no
desenvolvimento


       68
Impactos no
     desenvolvimento
• Vantagens da plataforma web
 • Cliente padrão
 • Atualizações centralizadas no servidor
 • Portabilidade

                    69
HTML e HTTP
HTML

 HTTP

Browser




           Interoperabilidade
                70
Web 2.0
Web humana

Usabilidade




          HTML
            71
                 Usuários
Web 2.0
Web como plataforma


          Web
         mashups


    Reutilização
      Performance
                   72
Impactos no
        desenvolvimento

HTML



JavaScript   CSS



                   73
Impactos no
        desenvolvimento

HTML



JavaScript   CSS



                   74
Impactos no
        desenvolvimento

HTML



JavaScript   CSS



                   75
                        Usuários
Impactos no
        desenvolvimento

HTML



JavaScript   CSS



                   76
                        Usuários
Impactos no
        desenvolvimento

HTML



JavaScript   CSS



                   77
                        Usuários
Referências
•   CHERYL GRIBBLE. History of the Web Beginning at CERN, 2010. Disponível em: http://
    www.hitmill.com/internet/web_history.html.

•   TIM BERNERS-LEE. Information Management: A Proposal, 1990. Disponível em: http://
    www.nic.funet.fi/index/FUNET/history/internet/w3c/proposal.html.

•   TIM BERNERS-LEE e R. CAILLIAU. World Wide Web: Proposal for a HyperText Project, 1990.
    Disponível em: http://www.w3.org/Proposal.html.

•   DOM CONNOLY. A Little History of the World Wide Web, 2000. Disponível em: http://
    www.w3.org/History.html.

•   J. J. GARRET. Ajax: A new approach to web applications, 2005. Disponível em: http://
    adaptivepath.com/ideas/essays/archives/000385.php.

•   M. MAHEMOFF. Ajax Design Patterns, 2006. O’Reilly Media, Inc.

•   P. FRATERNALI, S. COMAI, A. BOZZON E G. T. CARUGHI. Engineering rich internet
    applications with a model-driven approach, 2010. ACM Transaction on Information Systems.




                                              78
Onde procurar ajuda?

•   http://w3schools.com

•   http://www.w3.org/TR/REC-html40/

•   http://www.w3.org/Protocols/rfc2616/rfc2616.html

•   http://www.html5rocks.com/

•   http://ajaxpatterns.org/Patterns




                                       79

Mais conteúdo relacionado

Semelhante a HTML/HTTP e a Web

Web 2.0, web 3.0 e Plataforma Flash
Web 2.0, web 3.0 e Plataforma FlashWeb 2.0, web 3.0 e Plataforma Flash
Web 2.0, web 3.0 e Plataforma FlashAna Laura Gomes
 
Um revolução na web com HTML 5
Um revolução na web com HTML 5Um revolução na web com HTML 5
Um revolução na web com HTML 5Otávio Santana
 
Benefícios dos WebStandards
Benefícios dos WebStandardsBenefícios dos WebStandards
Benefícios dos WebStandardsNáiron Jcg
 
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011Reinaldo Ferraz
 
O novo protocolo http 2.0: uma revolução na Internet?
O novo protocolo http 2.0: uma revolução na Internet?O novo protocolo http 2.0: uma revolução na Internet?
O novo protocolo http 2.0: uma revolução na Internet?Elmano Cavalcanti
 
HTML5 e o futuro da Web - Senac Consolação 2012
HTML5 e o futuro da Web - Senac Consolação 2012HTML5 e o futuro da Web - Senac Consolação 2012
HTML5 e o futuro da Web - Senac Consolação 2012Reinaldo Ferraz
 
Web semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacionalWeb semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacionalRichard Duchatsch Johansen
 
Conecte - Curso de HTML - Apresentação
Conecte - Curso de HTML - ApresentaçãoConecte - Curso de HTML - Apresentação
Conecte - Curso de HTML - ApresentaçãoAntonio Silva
 
As tecnologias fundamentais da web - EGI 2015
As tecnologias fundamentais da web - EGI 2015As tecnologias fundamentais da web - EGI 2015
As tecnologias fundamentais da web - EGI 2015Newton Calegari
 
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoDesenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoFabio Moura Pereira
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudosinfo_cimol
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTMLTales Augusto
 
Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011
Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011
Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011Eduardo Souza
 
TÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdf
TÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdfTÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdf
TÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdfLeandrovilela19
 

Semelhante a HTML/HTTP e a Web (20)

Web 2.0, web 3.0 e Plataforma Flash
Web 2.0, web 3.0 e Plataforma FlashWeb 2.0, web 3.0 e Plataforma Flash
Web 2.0, web 3.0 e Plataforma Flash
 
Um revolução na web com HTML 5
Um revolução na web com HTML 5Um revolução na web com HTML 5
Um revolução na web com HTML 5
 
Benefícios dos WebStandards
Benefícios dos WebStandardsBenefícios dos WebStandards
Benefícios dos WebStandards
 
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
 
O novo protocolo http 2.0: uma revolução na Internet?
O novo protocolo http 2.0: uma revolução na Internet?O novo protocolo http 2.0: uma revolução na Internet?
O novo protocolo http 2.0: uma revolução na Internet?
 
HTML5 e o futuro da Web - Senac Consolação 2012
HTML5 e o futuro da Web - Senac Consolação 2012HTML5 e o futuro da Web - Senac Consolação 2012
HTML5 e o futuro da Web - Senac Consolação 2012
 
Evolução da Internet & Web
Evolução da Internet & WebEvolução da Internet & Web
Evolução da Internet & Web
 
Web semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacionalWeb semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacional
 
I.h aula 6 7 8 9 10 11 12
I.h aula 6 7 8 9 10 11 12I.h aula 6 7 8 9 10 11 12
I.h aula 6 7 8 9 10 11 12
 
Conecte - Curso de HTML - Apresentação
Conecte - Curso de HTML - ApresentaçãoConecte - Curso de HTML - Apresentação
Conecte - Curso de HTML - Apresentação
 
As tecnologias fundamentais da web - EGI 2015
As tecnologias fundamentais da web - EGI 2015As tecnologias fundamentais da web - EGI 2015
As tecnologias fundamentais da web - EGI 2015
 
HTML5 CSS3
HTML5 CSS3HTML5 CSS3
HTML5 CSS3
 
Web 1.0 x 2.0
Web 1.0 x 2.0Web 1.0 x 2.0
Web 1.0 x 2.0
 
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoDesenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - Introdução
 
HTML5
HTML5HTML5
HTML5
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
 
O Poder do HTML5
O Poder do HTML5O Poder do HTML5
O Poder do HTML5
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011
Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011
Primeiros Passos Para o Desenvolvimento Web - FLISOLGO 2011
 
TÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdf
TÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdfTÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdf
TÓPICOS AVANÇADOS EMENG. DE COMPUTAÇÃO II 2 semana.pdf
 

Mais de Willian Watanabe

Mais de Willian Watanabe (9)

Introdução ao JavaServer Faces
Introdução ao JavaServer FacesIntrodução ao JavaServer Faces
Introdução ao JavaServer Faces
 
JPA
JPAJPA
JPA
 
MVC na plataforma JEE
MVC na plataforma JEEMVC na plataforma JEE
MVC na plataforma JEE
 
Cookies e Sessions no HTTP
Cookies e Sessions no HTTPCookies e Sessions no HTTP
Cookies e Sessions no HTTP
 
Comunicação Cliente/Servidor - HTTP
Comunicação Cliente/Servidor - HTTPComunicação Cliente/Servidor - HTTP
Comunicação Cliente/Servidor - HTTP
 
CSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queriesCSS - Pseudo-classes, Seletores e Media-queries
CSS - Pseudo-classes, Seletores e Media-queries
 
CSS - Posicionamento
CSS - PosicionamentoCSS - Posicionamento
CSS - Posicionamento
 
CSS - Modelo de Caixa
CSS - Modelo de CaixaCSS - Modelo de Caixa
CSS - Modelo de Caixa
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 

HTML/HTTP e a Web