Aula 1 DWEB1

Prévia do material em texto

Desenvolvimento Web I Página 1 
 
 
Curso de informática – 2012/1º Desenvolvimento WEB I 
Aula 1 
 
Olá Pessoal, 
 
Nesta primeira aula vamos fazer uma introdução à nossa disciplina. Esta 
será a primeira de uma série de disciplinas que juntas tratarão do 
desenvolvimentos de sistemas para a Web. Antes de mais nada, temos que 
entender um pouco como funciona o ambiente Web. 
 
Ambiente Web: 
 
Muita gente confunde a Internet com Web. A Internet é uma forma de 
integrar diversas redes de computadores num ambiente, como se fosse uma só 
rede. Cada computador está ligado a uma rede específica. Por exemplo, você 
pode estar usando um computador conectado à rede do seu Polo, à rede do 
IFRS ou a uma rede privada, como a Oi. O mais interessante, no entanto, é que 
todas estas redes estão integradas em uma mesma estrutura de modo que 
uma mensagem da minha rede pode chegar à sua. A Internet oferece diversas 
aplicações, como serviço de e-mail, mensagem instantâneas (como MSN, 
Gtalk), atualização de software (como as atualizações de segurança do 
Windows) além de serviços mais técnicos, como serviço de proxy ou DNS. Cada 
uma destas aplicações possui sua própria arquitetura e modo de funcionar. 
A Web é mais uma destas aplicações, ou seja, é basicamente uma 
aplicação da Internet. Isso pode parecer estranho, uma vez que grande parte 
do nosso uso da Internet é a “navegação Web”, que inclui páginas de texto, 
blogs, sites de notícias, Bancos pela Internet, Wikipedia, sites de redes sociais 
(como Orkut e Facebook) e sistemas de EaD, como o Moodle. Todos os 
sistemas Web possuem a mesma estrutura, que é conhecida como cliente-
servidor. 
 
Nesta aula você não verá tecnicamente esta estrutura, vamos abordá-la 
de modo bastante superficial. Observe a figura abaixo: 
 
 
Desenvolvimento Web I Página 2 
 
 
Figura 1- Arquitetura Cliente/Servidor 
 
O servidor é um programa que recebe os pedidos das páginas e trata 
destes pedidos. Ele faz o papel de um atendente, recebendo pedidos, 
processando-os e repassando para outros programas, se for o caso. O cliente é 
o programa que faz um pedido (requisição) ao servidor e recebe os resultados. 
Todas as aplicações para Web possuem o mesmo cliente, o qual chamamos de 
navegador. Esta é uma das grandes vantagens da arquitetura Web. Você só 
precisa instalar em seu computador um cliente, que pode ser o Firefox, 
Internet Explorer ou outros. Já imaginou como seria se tivéssemos que instalar 
um programa para poder usar o Internet Banking, outro para utilizar o Moodle, 
outro para o Orkut, outro para os blogs, youtube e etc? Felizmente, utilizamos 
estes aplicativos em um só cliente, ou seja um navegador. 
A imagem a seguir (retirada de http://nerdson.com/blog/) resume de forma 
bem interessante o funcionamento de uma arquitetura Web: 
 
 
 
 
 
 
 
Desenvolvimento Web I Página 3 
 
 
 
Figura 2 Um exemplo de funcionamento da Arquitetura Web 
 
Além da estrutura comentada acima, para que a arquitetura Web 
pudesse ser viável, foi necessário construir uma linguagem comum, ou seja, 
uma forma de escrever os conteúdos da Web de forma a que todos os 
navegadores pudessem processar. Como você deve desconfiar, esta forma é o 
HTML (abreviação para a expressão inglesa HyperText Markup Language, que 
significa Linguagem de Marcação de Hipertexto ). 
Muito tempo depois de iniciado o grande avanço da Web, os criadores 
das páginas viram que precisavam de uma estrutura mais apropriada para a 
formatação das páginas, ou seja, uma forma de poderem ajustar o estilo inteiro 
de um site que isso trocasse necessariamente o conteúdo deste site. Além 
disso, queriam que houvesse uma forma de, ao trocar o estilo de uma página, 
todas as outras páginas do site também se adequassem ao novo estilo. Neste 
contexto surge uma tecnologia chamada CSS, ou folhas de estilo. 
Desenvolvimento Web I Página 4 
 
O conteúdo desta disciplina está dividido entre estes dois temas: 
1. Desenvolvimento HTML 
2. Utilização de Folhas de Estilo 
O objetivo é que vocês ao final da disciplina possam criar seus próprios sites 
utilizando estas ferramentas. Espero que se esforcem e aproveitem! 
 
1. HTML 
 
O HTML é um acrônimo para Hypertext Markup Language, ou Linguagem 
de Marcação de Hipertexto. O HTML surgiu quando um grupo de cientistas viu 
a necessidade de disseminar seu material de pesquisa na Internet. Publicar 
textos científicos com fórmulas, desenhos e diagramas era uma tarefa difícil 
(observe que os modernos processadores de textos ainda não existiam, o que 
havia eram apenas editores no estilo “bloco de notas”). Além disso, havia a 
necessidade de criar referências entre as publicações científicas, ou seja, 
quando se fala de Lei da Gravidade, seria interessante ligá-lo a algum trabalho 
de Newton. 
Neste contexto, surgiu a ideia de se ter textos formatados, com 
tamanhos, fontes, imagens e etc. Além disso, os textos deviam ter ligações a 
outros textos, que chamamos de hipertextos. O que naquela época se tornou 
uma ideia revolucionária, para nós hoje é algo bastante corriqueiro: 
“navegamos” entre o que chamamos de página web, um endereço que contém 
informações textuais e ligações a outras páginas web, que por sua vez está 
ligada a uma série de outras páginas. Estas ligações chamamos de links. Se você 
quiser saber mais sobre este assunto, acesse o site 
http://pt.wikipedia.org/wiki/HTML. 
 
 
2. Modelo HTML 
 
Observe a página abaixo. Ela é bastante simples, mas já podemos 
observar que há uma formatação na página como: 
 alinhamentos (textos centralizados e alinhados a esquerda); 
 imagem; 
 ligação para outra página; 
 textos em tamanhos diferentes 
 
 
Desenvolvimento Web I Página 5 
 
 
Figura 3- Imagem de site 
Como esta página foi construída? Para isso podemos obervar o código 
fonte de uma página. No Firefox ela pode ser feita com o comando <ctrl+U>. 
Observe o código fonte na figura abaixo: 
 
 
Desenvolvimento Web I Página 6 
 
 
Nesta aula não vamos aprender o que quer dizer cada elemento desta 
figura, no entanto, mesmo não entendendo o significado de cada elemento 
deste código, podemos perceber através deste exemplo algumas características 
do modelo HTML, que foram divididas nos itens abaixo: 
 
2.1. Modelo HTML 
 
Um código fonte HTML nada mais é que um arquivo texto comum, mas 
escrito de uma forma padronizada de forma que o navegador possa entender. 
O fato de ter sido construído como um texto simples é uma grande vantagem 
para o HTML, uma vez que qualquer pessoa pode criar programas utilizando 
HTML. O Modelo HTML é definido por um consórcio de empresas denominado 
W3C (world wide web consortium). 
Você pode visitar o site no Brasil: http://www.w3c.br/Home/WebHome 
 
 
2.2. Elementos HTML 
 
Podemos perceber que o html é formado por elementos delimitados 
pelo que chamamos de etiquetas ou tags. As tags são indicações de texto 
criadas no formato <nome> …..... </nome>. A tag é delimitada pelos 
parênteses angulares, ou os sinais < e >. 
 
Observe também que as tags possuem sinais de inicio e fim. Esta questão 
é muito importante. O inicio de uma tag é escrita no formato <nome> 
enquanto o fim de uma tag fica no formato </nome>, com uma “/” 
após o sinal “<”. 
 
Veja um trecho dentro do nosso exemplo: 
 
 
 
 
Podemos perceber que a tag <center> indica que tudo que estiver entre 
<center> e </center> ficará centralizado (como é o caso de POEMINHO DO 
CONTRA). 
 
 
 
Desenvolvimento Web I Página 7 
 
2.3. Alinhamento de Elementos HTML 
 
Os elementos HTML podem estar dentro de outros elementos HTML. Por 
exemplo, <h1>indica (como veremos com mais detalhes nas próximas aulas) 
que o que está dentro dela deve ser de tamanho grande. Observe no nosso 
exemplo: 
 
 
 
Dessa forma, o texto “POEMINHO DO CONTRA” além de centralizado, 
fica em tamanho grande. 
 
 
2.4. Atributos 
Em muitos casos precisamos passar informações adicionais dentro de um 
elemento HTML. Estas informações são chamadas de atributos e são colocadas 
dentro de uma tag. Cada atributo segue a forma: 
 
 
 
Como veremos nas próximas aulas, nem todos os elementos HTML 
possuem atributos e a maioria deles é opcional. No entanto, é importante que 
conheçamos este recurso. Em nosso exemplo, podemos ver o elemento img, 
que é usado para colocarmos uma imagem na nossa página: 
 
 
 
Observe que além do próprio nome “img” há um atributo “src”, que 
indica o nome do arquivo da imagem. 
Resumindo, O HTML possui as seguintes características: 
 É um texto simples, aberto e que pode ser criado ou lido por qualquer 
software. Ou seja, é um formato livre; 
 A codificação é formada por etiquetas, chamadas de tags; 
 As tags são criadas no formato <nome> ….. </nome>, sempre com 
parênteses angulares; 
 As tags podem ter informações adicionais que são chamadas de 
atributos, que são feitas no formato nome='valor'. 
 
Desenvolvimento Web I Página 8 
 
Se você não entendeu ou ficou meio “perdido” nesta codificação, não se 
preocupe. Esta nossa primeira aula é apenas uma ambientação geral. Cada 
elemento do HTML receberá atenção especial nas futuras aulas. Além disso, 
não deixe de utilizar nosso fórum para tirar suas dúvidas. 
 
3. Ferramentas Necessárias 
 
Para esta disciplina utilizaremos os seguintes softwares: 
 Editor de Texto: Vamos utilizar um editor de texto para desenvolvimento Web. 
Podemos utilizar o TextPad, Notepad++ ou qualquer outro que edite texto 
comum. Podemos utilizar também o bloco de notas do windows ou o 
WordPad, mas eles não são recomendados.
 Navegador: O interpretador do nosso site é o navegador. Quem quiser utilizar 
o Internet Explorer , Firefox, Chrome ou outro navegador, fique à vontade, 
porém recomendamos o Firefox por uma questão de padronização. Nas 
próximas aulas veremos como utilizar alguns recursos bem úteis disponíveis 
neste navegador.

4. Para saber mais: 
 
Quem deseja se adiantar no aprendizado de HTML, pode recorrer a diversos lugares 
na Web. Alguns deles recomendamos: 

 Curso de HTML: Utilizaremos alguns itens deste site. 
http://comocriarmeusite.com.br/ e http://www.guanabara.info/2008/12/extra-
curso-de-html-em-videocast/ 
 Site W3Schools: Este pertence ao grupo que padroniza os recursos da Web. 
Um bom guia de referência (em inglês). 
(http://www.w3schools.com/html/default.asp) 
 Site do Maujor: Ele entende de tudo em relação a HTML e CSS (folhas de 
estilo). É um site mais avançado, mas vale a pena ver. (http://maujor.com/) 
 
5. Vídeo Aulas 
 
Curso de HTML ministrado por Gustavo Guanabara, disponibilizado, disponibilizado 
gratuitamente em http://html.guanabara.info 
 
Aula1-Alô Mundo (http://www.youtube.com/watch?v=RKMCc-64SjA) 
Aula2 - Textos e Parágrafos (http://www.youtube.com/watch?v=GH2zVkyEj0Y) 
Aula3 - Textos (http://www.youtube.com/watch?v=r7oWcJ4O8yA)