• Like
Unb   2012.1 - dweb - 03 - fundamentos web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Unb 2012.1 - dweb - 03 - fundamentos web

  • 208 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
208
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
0

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. Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb 3 Fundamentos Web “E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual seja a boa, agradável e perfeita vontade de Deus..” Romanos 12:21 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 2. DWEB - Design para Web / Carlos José Contato Carlos José carlosjose.unibratec@gmail.com www.carlosjose.net twitter.com/carlosjoser2n2 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 3. DWEB - Design para Web / Carlos José Objetivo da Aulan Descrever o que é, para que serve e porque adotar uma linguagem de marcação?n Apresentar os fundamentos da linguagem de marcação HTML, bem como a sua origem.n Apresentar os aspectos de servidor web3 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 4. DWEB - Design para Web / Carlos José Agendan Introdução as linguagens de marcação.n Conceitos de WWWn Conceitos de URLn Protocolosn DNS4 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 5. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  HTML î HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. î Documentos HTML são interpretados por navegadores. n  A tecnologia é fruto do "casamento" dos padrões HyTime e SGML.5 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 6. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  SGML î O Standard Generalized Markup Language (SGML) é uma metalinguagem através da qual se pode definir linguagens de marcação para documentos. n  SGML é uma descendente da Generalized Markup Language (GML) da IBM, desenvolvida na década de 60 por Charles Goldfarg, Edward Mosher e Raymond Lorie (cujas iniciais dos sobrenomes por acaso coincidem com GML). î  é um padrão de formatação de textos. n  Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.6 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 7. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  História î  Luz em meio as trevas... n  Tim Berners-Lee criou o HTML original n  A linguagem foi definida em especificações formais na década de 1990, inspiradas nas propostas originais de Tim Berners-Lee em criar uma linguagem baseada em SGML para a Internet. n  A primeira publicação foi esboçada por Berners-Lee e Dan Connolly, e publicada em 1993 na IETF como uma aplicação formal para o SGML (com uma DTD (DocType Definition) em SGML definindo a gramática). n  Desde 1996, as especificações HTML vêm sendo mantidas, com o auxílio de fabricantes de software, pela World Wide Web Consortium (W3C). 7 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 8. DWEB - Design para Web / Carlos José Introdução as linguagens de marcação Sir Timothy John "Tim" Berners-Lee Recentemente, Tim Berners-Lee foi considerado um dos maiores gênios vivos do mundo, segundo o levantamento "Top100 Living Geniuses", da consultoria Creators Synectics. Berners-Lee usou este NeXTcube na CERN para criar o primeiro servidor web do mundo. O primeiro website que Tim Berners-Lee construiu - inicialmente unicamente com página de texto - foi colocada online em 7 de agosto de 1991. Oferecia uma explicação sobre o que a World Wide Web, como alguém poderia criar um navegador, como instalar e configurar um servidor web.8 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 9. DWEB - Design para Web / Carlos José Introdução as linguagens de marcação http://www.w3.org/History/19921103-hypertext/hypertext/WWW/News/9201.html9 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 10. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  História î As especificações n  A última especificação HTML lançada pela W3C foi a recomendação HTML 4.01, publicada no final de 1999. Uma errata ainda foi lançada em 2001. n  O grupo de trabalho da W3C desde 2002 a 2006, de forma exclusiva focado no desenvolvimento do XHTML, uma especificação HTML baseada em XML que é considerada pela W3C como um sucessor do HTML. n  O XHTML faz uso de uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado e estendido.10 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 11. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  História î As especificações n  Em maio de 2007 a W3C reconsiderou sua decisão de encerrar o desenvolvimento da HTML em favor da XHTML e tornou pública sua decisão de retomar os estudos para o desenvolvimento da HTML5 n  Em janeiro 2011, Ian Hickson, editor da HTML5, publicou no blog da WHATWG uma matéria informando que a especificação para a HTML5 continuaria a ser desenvolvida exclusivamente pelo W3C11 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 12. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Importante î O mínimo que você precisa saber sobre HTML n  O primeiro conceito que deve-se ter em mente ao projetar páginas Web é que HTML não foi criado para controlar a aparência dos documentos, ao contrário dos processadores de texto e programas de layout de página. n  As tags apenas informam ao navegador o que são os elementos que estão na página. n  Em compensação é muito simples criar uma página básica para colocar na Internet com HTML.12 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 13. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Tag... î Como funcionam os tags n  Esses códigos, chamados tags, são responsáveis pela marcação do texto em função de seu papel dentro do documento. n  O título principal é marcado com as tags <h1> e </ h1>, enquanto os parágrafos são separados pela tag <p> e </p>. n  Existem dois tipos de tags î  Alguns são formados aos pares, indicando o início e o fim do trecho afetado, como o par <h1> e </h1>. î  Outros podem ser colocados individualmente, como o <br />13 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 14. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Tag... î Tags básicas n  Existem quatro pares de tags que devem ser sempre colocados na página. n  O par de tags <html> e </html> deve englobar todo o conteúdo da página (estar presente no início e no fim do texto) para indicar ao navegador que se trata de um documento HTML. n  O documento, por sua vez, está dividido em duas partes: î  o cabeçalho e o corpo do texto, cada um indicado por um par de tags diferente.14 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 15. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Estrutura î Tags básicas Estrutura documento HTML Estrutura documento HTML início <html> cabeçalho <head> <title></title> </head> corpo do <body> documento </body> fim </html>15 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 16. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Decifrando as Tag’s î Tags básicas n  Tudo que estiver entre o par <head> e </head> irá compor o cabeçalho, não aparecendo na página. n  O elemento principal do cabeçalho é o título do documento, que deve ser colocado entre o par <title> e </title>. î  Osnavegadores mostram o título na barra de título do programa. n  Porfim, existe o par <body> e </body>, que serve para indicar o corpo do texto, ou seja, a parte mostrada na janela do navegador.16 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 17. DWEB - Design para Web / Carlos José Introdução as linguagens de marcação <head><title>Carlos José</title></head> <body>tudo que você esta aqui!!!</body>17 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 18. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Importante î  Apesar dessa aparente sofisticação, as páginas Web não passam de documentos eletrônicos de texto simples. î  Podem ser produzidas com qualquer editor de texto não formatado como o bloco de notas do Windows. î  Regras n  Para garantir uma flexibilidade dos documentos HTML ao serem armazenados nos computadores, aplique sempre estes três princípios: î  Nunca coloque acento nos nomes dos documentos î  Nunca utilize espaços em branco entre palavras nos nomes dos documentos î  Nunca escreva os nomes dos documentos com letras maiúscula.18 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 19. DWEB - Design para Web / Carlos José Conceitosn  WWW n  A World Wide Web é um conjunto de documentos multimídia que estão conectados ou ligados por hiper-vínculos, de modo que você possa passar de um documento para outro com um clique do mouse. î  Documento: é apenas um relatório que descreve alguma coisa. î  Multimídia: a criação e exibição de um documento não limitado às palavras, pois tem som, imagem, vídeo e etc. î  Hiper-vínculos: são conexões a vários servidores ou no mesmo servidor web, que permite ir de um documento para outro. n  O navegador utiliza o código HTML para exibir o documento com os hipervínculos, estes por sua vez tem as URL´s que contém os endereços exatos de outros documentos HTML.19 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 20. DWEB - Design para Web / Carlos José Conceitosn  URL n  As URL (Uniform Resource Locators) descrevem o local exato de um recurso da internet ou intranet – por exemplo: vídeos, músicas, texto, aplicativos e etc. n  Em geral, ao criar um hiper-vínculo especialmente àqueles que descrevem recursos da internet, você fornece três informações diferentes: protocolo – nome do servidor – caminho do documento. n  Exemplo de uma URL para um documento Web: î  http://www.unibratec.com.br/noticias/index.html20 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 21. DWEB - Design para Web / Carlos José Conceitosn  URL n  Tipos de URL: î  Absoluta - este tipo de URL descreve o caminho absoluto informando desde a origem até chegar ao documento desejado. §  Ex: http://www.unibratec.com.br/noticias/index.htm î  Relativa - este tipo de URL descreve o caminho relativo onde não há necessidade de informar o caminho desde a origem onde esta o documento. §  Ex: ../noticias/index.html21 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 22. DWEB - Design para Web / Carlos José Protocolosn  Alguns conceitos î  Protocolos n  Você pode usar a palavra protocolo em diversos sentidos, quando estiver falando sobre computadores e internet, é importante que você pense na palavra como um modo de se referir a um conjunto especifico de regras para transferir informações entre computadores. n  Exemplos de protocolos: î  http:// - transfere documentos web entre computadores. î  https:// - transfere documentos web com segurança entre computadores, de modo que eles não possam ser visualizados ou lidos por outros computadores durante a transmissão. î  ftp:// - transfere arquivos entre computadores. î  news: - conecta o seu navegador a um servidor de grupos de discussão.22 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 23. DWEB - Design para Web / Carlos José DNSn  Alguns conceitos î  DNS n  Domain Name System – (Sistema de Nomes de Domínios) é um sistema de gerenciamento de nomes hierárquico e distribuído operando segundo duas definições: î  Examinar e atualizar seu banco de dados. î  Resolver nomes de servidores em endereços de rede (IPs). n  O sistema de distribuição de nomes de domínio foi introduzido em 1984 e com ele os nomes de hosts residentes em um banco de dados pôde ser distribuído entre servidores múltiplos, baixando assim a carga em qualquer servidor que provê administração no sistema de nomeação de domínios. n  Cada computador possui um endereço na Internet chamado de endereço IP. n  A atribuição de domínios na Internet visa a não utilização do mesmo nome de domínio por mais de uma instituição.23 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 24. DWEB - Design para Web / Carlos José DNSn  Alguns conceitos î DNS n  Convencionou-se um domínio geográfico a cada país, com exceção dos EUA e a administração interna ficou a cargo de cada país. n  No Brasil é a FAPESP: registro.br n  Exemplo de Domínios: î  gov - indica endereço de governo; î  edu - indica endereço educacional; î  org - indica endereço de organizações não governamentais; î  mil - indica endereço de rede militar; î  net - indica endereço de organização da rede; î  com - indica endereço de rede comercial.24 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 25. DWEB - Design para Web / Carlos José Perguntas ?25 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  • 26. DWEB - Design para Web / Carlos José Considerações FinaisFonte: Ramalho, J.A., HTML 4: Teoria e pratica, São Paulo, Berkeley Brasil, maio 2000; ROBBINS,Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição; http://pt.wikipedia.org26 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12