Introdução ao Web Design

Introduo ao Desenvolvimento e Design de Websites

Prof.: Salustiano Rodrigues de Oliveira Email: [email protected] Site: www.profsalu.wordpress.com

mailto:[email protected]://www.profsalu.wordpress.com


Objetivos: Desenvolver pginas estticas.

Analisar a estrutura bsica de uma pgina HTML.

Conhecer as principais tags em uma pgina web.

Aplicar os recursos de formatao em pginas web.


Contedo: Conceitos histricos e evoluo de websites. Estrutura bsica de pginas web:

Principais tags HTML. Formatao de uma pgina. Insero de imagens. Criao de vnculos. Criao de tabelas. Formulrios.


Folha de estilos (CSS).

DHTML, XHTML, HTML5.

Ambiente de desenvolvimento de websites.

Softwares de apoio: editor de texto.

Histria da Internet

A Internet A Web muitas vezes confundida como sendo a prpria Internet. No entanto, a Internet engloba um conceito mais amplo, tratando-se de uma vasta coleo de computadores conectados entre si que armazenam dados e informaes disponveis para todos os demais computadores da rede.

A Internet nasceu em 1969, era uma rede de computadores do Departamento de Defesa norte-americano. Interligava originalmente laboratrios de pesquisa e se chamava ARPAnet (ARPA: Advanced Research Projects Agency). O nome Internet propriamente dito surgiu bem mais tarde, quando a tecnologia da ARPAnet passou a ser usada para conectar universidades e laboratrios, primeiro nos EUA e depois em outros pases. Ela no pertence a uma nica empresa ou a um nico pas as diferentes partes pertencem a diversas organizaes, mas a Internet em si no pertence a ningum. Desta forma, basicamente auto-regulada em conjunto.

Acesso a Internet De uma forma geral, o acesso

a Internet realizado por um dispositivo chamado modem.

ele o responsvel pela m o d u l a o e d e m o d u l a o d a s i n f o r m a e s e n t r e o s sistemas: digital (computador) e analgico (linha telefnica / cabo / sinal de rdio).

Velocidade da conexo

Conexes de alta velocidade so de tempo integral, como satlite, cabo, linha T1, xDSL, ISDN, etc.

Usa-se um modem especial, e m u m a c o n e x o q u e permanece aberta e disponvel o tempo todo e velocidades que atingem e ultrapassam 1500 bits por segundo.

Popularizao da Internet Durante cerca de duas dcadas o acesso Internet ficou restrito aos ambientes acadmicos e cientficos. Somente em 1987 foi liberado seu uso comercial pela primeira vez, nos EUA. Mas foi em 1992 que a Internet realmente explodiu, com o desenvolvimento da Web.

Foi ento que surgiram nos EUA vrias empresas provedoras de acesso Internet. Centenas de milhares de pessoas comearam a publicar informaes na Internet, que se tornou uma mania mundial.

Popularizao da Internet

No Brasil, a explorao comercial da Internet foi liberada em 1995. Assim, embora a Internet tenha sido criada atravs de uma iniciativa no-comercial, isto , exclusivamente para fins de segurana, educao e pesquisa, tornou-se realmente popular com os acessos comerciais, seja para uso pessoal ou corporativo.

World Wide WebA World Wide Web a Web" ou a WWW" para encurtar ("rede de alcance mundial" traduzindo literalmente) uma rede de computadores na Internet que fornece informao em forma de hiperdocumentos baseados em hipertextos (textos com links), os quais, com a introduo de figuras, vdeos e sons, podem ser chamados de documentos hipermdia.

Para ver a informao, deve-se usar um aplicativo chamado navegador (browser) para descarregar as informaes (chamadas "documentos" ou "pginas web") de servidores web (ou "sites") e mostr-los na tela do usurio. O usurio pode ento seguir os links na pgina para outros documentos ou mesmo enviar informaes de volta para o servidor para interagir com ele. O ato de seguir links comumente chamado de "navegar" ou "surfar" na Web.

World Wide WebA Web foi criada em um projeto no CERN no fim do ano 1990, quando Tim Berners-Lee construiu o sistema prottipo que se tornou um modelo do que hoje a World Wide Web. O intento original do sistema foi tornar mais fcil o compartilhamento de documentos de pesquisas entre os colegas.

A funcionalidade da Web baseada em trs padres: a URL, que especifica como cada pgina de informao recebe um "endereo" nico onde pode ser encontrada; HTTP, que especifica como o navegador e servidor enviam informao um ao outro (protocolo); e HTML, um mtodo de codificar a informao de modo que possa ser exibida em uma grande quantidade de dispositivos. Berners-Lee hoje encabea o World Wide Web Consortium (W3C), que desenvolve e mantm estes padres e outros de modo a permitir que os computadores na Web armazenem e comuniquem todos os tipos de informao efetivamente.

Sites e Aplicaes webNormalmente, as pessoas utilizam o termo site quando se referem a blogs, sites de notcias, sites institucionais, portais, lojas virtuais, entre outros. J a denominao aplicao web muito utilizada para sistemas de gesto empresarial que so acessados atravs de navegadores (browsers).

No h uma definio exata que diferencie claramente sites e aplicaes web. Alguns defendem que os sites so read-only (somente leitura) enquanto as aplicaes web so read-write (leitura e escrita). Nessa definio, os sites apenas fornecem contedo enquanto as aplicaes web podem fornecer e/ou receber contedo.

Sites e Aplicaes webSeguindo essa linha de raciocnio, algumas pessoas gostam de utilizar o grau de interatividade com os usurios para classificar como site ou aplicao web. Nessa viso, aplicaes web seriam mais interativas e os sites menos interativos.

Outras pessoas preferem utilizar o critrio do propsito para classificar como site ou aplicao web. Por exemplo, se o propsito divulgar as informaes de uma empresa, os dados de um produto, as notcias de um determinado assunto, utiliza-se o termo site. Se o propsito criar uma ferramenta para controlar as atividades administrativas de uma organizao, utiliza-se a denominao aplicao web.

Sites e Aplicaes web

Utilizando o critrio do propsito para classificar como site ou aplicao web, podemos concluir que, geralmente, os sites necessitam de uma interface mais atrativa pois normalmente esto vendendo alguma coisa ou alguma ideia. Por outro lado, na maior parte dos casos, o mais importante para as aplicaes web possuir uma interface fcil de utilizar.

Navegadores e DispositivosA s p e s s o a s a c e s s a m s i t e s e a p l i c a e s w e b a t r a v s d e navegadores (browsers) como Chrome, Firefox, Internet Explorer e Safari.

Normalmente, esses navegadores possuem algumas diferenas na forma de exibir as pginas web aos usurios.

Antigamente, essas diferenas eram maiores. Com o passar do tempo, os navegadores ficaram cada vez mais parecidos nesse aspecto. Contudo, os desenvolvedores web ainda devem tomar cuidado com essas diferenas.

Navegadores e DispositivosOutro problema de compat ib i l idade importante causado pela grande variedade de dispositivos que podem ser utilizados para acessar os sites e as aplicaes web.

Atualmente, as pessoas acessam os sites e as aplicaes web atravs de computadores tradicionais, tablets, celulares, televisores, entre outros. Esses dispositivos possuem telas de tamanhos diferentes. Dessa forma, os desenvolvedores web devem considerar essas diferenas na criao das pginas web.

Hoje em dia, fala-se muito de design responsivo. Os sites ou as aplicaes web so ditos responsivos se eles esto preparados para diferentes tamanhos de tela.

Web Servers e HTTPOs sites e as aplicaes web so implantados em computadores conectados Internet ou a uma rede privada qualquer (Intranet).

N o r m a l m e n t e , o s s i t e s s o implantados em computadores conectados Internet pois assim podero ser acessados praticamente de qualquer lugar do mundo.

Por outro lado, as aplicaes web, muitas vezes, so implantadas em computadores conectados a uma Intranet pois comum ser necessrio restringir o acesso externo elas.

Web Servers e HTTPOs computadores nos quais os sites e as aplicaes web so implantados so chamados de WebServers.

Quando acessamos uma pgina web atravs de um navegador, ele realiza uma requisio ao Web Server onde essa pgina est armazenada.

Ao receber a resposta do Web Server com a pgina web solicitada, o navegador a exibe para ns. As mensagens de requisio e resposta trocadas entre o navegador e o web server so definidas pelo protocolo HTTP.

Web Servers e HTTP

Dominios e endereos de IPOs dispositivos conectados a uma rede so identificados atravs de endereos formados por sequncias de nmeros. Esses endereos so chamados de endereos IP.

Em uma Intranet, quem controla os endereos IP dos dispositivos conectados a prpria organizao que administra essa Intranet.

Por outro lado, os endereos IP dos dispositivos conectados Internet so gerenciados pelos provedores de acesso (ISP).

Dominios e endereos de IPA princpio, para acessar uma pgina de um site ou de uma aplicao web, devemos conhecer o endereo IP do Web Server que contm esse site ou essa aplicao web.

Atualmente, o endereo IP do Web Server onde o site do portal UOL est implantado 200.147.67.142. Podemos utilizar esse endereo IP para acessar as pginas do portal UOL.

O endereo IP 200.144.183.244 est vinculado a um dos Web Servers onde o site da USP est implantado. Tambm podemos acessar as pginas do site da USP utilizando diretamente esse endereo IP.

Dominios e endereos de IPSe voc tiver uma memria muito boa pode decorar os endereos IP dos sites que acessa com maior frequncia. Mas, para maior parte das pessoas, seria impossvel decorar tantos nmeros. Para resolver esse problema, os endereos IP so associados a domnios.

Alguns exemplos de domnios:

www.wikipedia.org

www.google.com.br

www.portal.estacio.br

www.facebook.com

http://www.wikipedia.orghttp://www.google.com.brhttp://www.portal.estacio.brhttp://www.facebook.com

Dominios e endereos de IPH uma outra vantagem importante dos domnios sobre os endereos IP.

Em alguns casos, o endereo IP de um Web Server precisa ser alterado. Geralmente, essa modificao ocorre por motivos tcnicos.

Supondo que essa mudana ocorra, quem estiver acessando esse Web Server atravs do endereo IP antigo no conseguir mais acess-lo dessa forma.

Por outro lado, quem estiver acessando esse Web Server atravs do domnio dele poder continuar acessando da mesma forma pois esse domnio pode ser facilmente associado ao novo endereo IP.

Dominios e endereos de IP

Os domnios so controlados por organizaes geralmente vinculadas ao governo.

Por exemplo, os domnios .br so controlados e disponibilizados pelo Registro de Domnios para a Internet no Brasil (registro.br).

http://registro.br

DNS (Domain Name System)Como vimos, podemos acessar um Web Server diretamente atravs do seu endereo IP ou indiretamente atravs de um domnio.

Para utilizar a segunda abordagem, necessrio consultar um servidor DNS para traduzir o d o m n i o d e s e j a d o p a r a o e n d e re o I P correspondente.

Basicamente, a tarefa dos servidores DNS informar o endereo IP associado a um domnio.

DNS (Domain Name System)

H diversos servidores DNS que so pblicos. Como:

OpenDNS (208.67.222.222e208.67.220.220)

Google Public DNS (8.8.8.8 e 8.8.4.4)

Level3 (209.244.0.3 e 209.244.0.4)

Servios de hospedagemUma organizao pode possuir computadores atuando como Web Servers em sua prpria infraestrutura ou na infraestrutura de empresas especializadas. Em determinadas situaes, a primeira possibilidade mais conveniente.

Por exemplo, normalmente, as instituies bancrias preferem manter os seus sites e as suas aplicaes web em Web Servers dentro da sua prpria infraestrutura. Essa abordagem permite um controle maior da comunicao entre essas instituies e os seus clientes. Mas, ela exige grandes investimentos. Para garantir que os seus Web Servers estejam sempre funcionando, essas instituies bancrias mantm profissionais 24 horas por dia 7 dias por semana (24/7). Caso contrrio, os sites ou as aplicaes web dessas instituies podem ficar fora do ar e gerar grandes prejuzos.

Servios de hospedagemPor outro lado, muitas vezes, mais conveniente manter os Web Servers de uma organizao na infraestrutura de uma empresa especializada.

Dessa forma, a responsabilidade de mant-los funcionando delegada essa empresa.

Essa abordagem, geralmente, diminui os custos. Contudo, o controle delegado a uma outra empresa. O servio oferecido por essas empresas denominado servio de hospedagem.

Algumas empresas que oferecem esse tipo de servio:

Amazon

Localweb

UOLHOST

Host Gator

KingHost

Arquitetura Web

Observe que o desenho acima foi dividido em duas partes: client side e server side.

Alguns profissionais se especializam no client side e outros no server side. Outra denominao possvel para client side front-end e para server side back-end.

Arquitetura WebPor exemplo, um web designer deve ter bons conhecimentos do client side. Por outro lado, um programador web deve ter bons conhecimentos do server side.

Geralmente, os web designers no precisam ter conhecimento do server side mas t-lo pode ser til. Por outro lado, os programadores web precisam conhecer razoavelmente bem o client side.

ExercciosMarque a alternativa CORRETA.

Questo 1A. Existe uma diviso clara e exata entre o conceito de site e

aplicao web.

B. Geralmente, os sites possuem maior grau de interatividade com o usurio do que as aplicaes web.

C. As aplicaes web no so utilizadas como ferramentas para controle administrativo de uma empresa.

D. Geralmente, os sitesvendemalgum produto ou alguma ideia.

E. Geralmente, as aplicaes web vendem algum produto ou alguma ideia.

Questo 2A. A forma de exibio das pgina web padro em todos os

navegadores.

B. A forma de exibio das pgina web padro em todos os dispositivos.

C. O Design Responsivo trata de questes relacionadas performance dos sites.

D. O Design Responsivo trata de questes relacionadas performance dos navegadores.

E. Os sites ou as aplicaes web so ditos responsivos se eles esto preparados para diferentes tamanhos de tela.

Questo 3A. HTTP o protocolo de comunicao.

B. A Internet uma rede de computadores privada.

C. O s s i t e s e a s a p l i c a e s w e b s o implementados em Web Computers.

D. Aplicaes web s podem ser implantadas em redes privadas.

E. Sites s podem ser implantados na Internet.

Questo 4A. O endereo IP de um disposi t ivo determina

precisamente a localizao geogrfica desse dispositivo.

B. O contedo de um site determinado pelo domnio associado ao Web Server onde esse site est implantado.

C. Domnios so associados a endereos IP.

D. Para aplicaes web devemos utilizar domnios especiais.

E. Todo domnio inicia com www.

Questo 5A. comum dividir a arquitetura web em left side e right

side.

B. comum dividir a arquitetura web em down side e up side.

C. comum dividir a arquitetura web em outside e inside.

D. comum dividir a arquitetura web em client side e server side.

E. comum dividir a arquitetura web em front side e back side.

Gabarito

1. D

2. E

3. A

4. C

5. D

Bibliografia Apostila do curso K19 - Curso de Desenvolvimento

Web com HTML, CSS e Javascript.

Wikipdia - http://pt.wikipedia.org/wiki/Internet

Apostila do curso Caelum - Curso de Desenvolvimento Web com HTML, CSS e JavaScript

W3C Brasil - http://www.w3c.br/Home/WebHome

W3Schools - http://www.w3schools.com

http://www.k19.com.brhttp://pt.wikipedia.org/wiki/Internethttp://www.caelum.com.br/cursos-web-front-end/http://www.w3c.br/Home/WebHomehttp://www.w3schools.com

Documents

Introdução ao Web Design