• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Unb   2012.1 - dweb - 03 - fundamentos web
 

Unb 2012.1 - dweb - 03 - fundamentos web

on

  • 479 views

 

Statistics

Views

Total Views
479
Views on SlideShare
479
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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

    Unb   2012.1 - dweb - 03 - fundamentos web Unb 2012.1 - dweb - 03 - fundamentos web Presentation Transcript

    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • DWEB - Design para Web / Carlos José Perguntas ?25 Capítulo 3 - Fundamentos Web Monday, 27 de February de 12
    • 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