Your SlideShare is downloading. ×
0
Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb                                                3      ...
DWEB - Design para Web / Carlos José                                             Contato                                  ...
DWEB - Design para Web / Carlos José                                   Objetivo da Aulan Descrever o que é, para que serv...
DWEB - Design para Web / Carlos José                                           Agendan Introdução                      as...
DWEB - Design para Web / Carlos José                                   Introdução as linguagens de marcaçãon  HTML    î ...
DWEB - Design para Web / Carlos José                                      Introdução as linguagens de marcaçãon    SGML  ...
DWEB - Design para Web / Carlos José                                      Introdução as linguagens de marcaçãon    Histór...
DWEB - Design para Web / Carlos José                                   Introdução as linguagens de marcação               ...
DWEB - Design para Web / Carlos José                                      Introdução as linguagens de marcação    http://w...
DWEB - Design para Web / Carlos José                                     Introdução as linguagens de marcaçãon  História ...
DWEB - Design para Web / Carlos José                                     Introdução as linguagens de marcaçãon  História ...
DWEB - Design para Web / Carlos José                                     Introdução as linguagens de marcaçãon  Important...
DWEB - Design para Web / Carlos José                                    Introdução as linguagens de marcaçãon  Tag...    ...
DWEB - Design para Web / Carlos José                                     Introdução as linguagens de marcaçãon  Tag...   ...
DWEB - Design para Web / Carlos José                                     Introdução as linguagens de marcaçãon  Estrutura...
DWEB - Design para Web / Carlos José                                     Introdução as linguagens de marcaçãon  Decifrand...
DWEB - Design para Web / Carlos José                                    Introdução as linguagens de marcação           <he...
DWEB - Design para Web / Carlos José                                      Introdução as linguagens de marcaçãon    Import...
DWEB - Design para Web / Carlos José                                                Conceitosn  WWW     n  A World Wide ...
DWEB - Design para Web / Carlos José                                            Conceitosn  URL        n  As URL (Unifor...
DWEB - Design para Web / Carlos José                                              Conceitosn  URL        n  Tipos     de...
DWEB - Design para Web / Carlos José                                               Protocolosn    Alguns conceitos      î...
DWEB - Design para Web / Carlos José                                                      DNSn    Alguns conceitos      î...
DWEB - Design para Web / Carlos José                                               DNSn  Alguns        conceitos     î D...
DWEB - Design para Web / Carlos José                                        Perguntas                                    ?...
DWEB - Design para Web / Carlos José                                                  Considerações FinaisFonte: Ramalho, ...
Upcoming SlideShare
Loading in...5
×

Unb 2012.1 - dweb - 03 - fundamentos web

234

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
234
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Unb 2012.1 - dweb - 03 - fundamentos web"

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 25. DWEB - Design para Web / Carlos José Perguntas ?25 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
  26. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×