Desenvolvimento Web
Saymon Yury C. Silva
Analista de Sistemas
http://www.saymonyury.com.br
Vantagens




Informação em qualquer hora e lugar;
Rápidos resultados;
Portabilidade absoluta;
Manutenção facilitada
Como a coisa funciona

O que é a Internet ?

A
Internet
é
um
conjunto
de
computadores
conectados entre si. Alguns deles ficam conectados
permanentemente (servidores de empresas, governo,
universidades,
bibliotecas, provedores de serviços,
etc.) enquanto outros se conectam eventualmente,
como
usuários
Independente
de
domésticos
tipo
de
por
conexão,
conectados, todos constituem a Internet.
exemplo.
uma
vez
Como a coisa funciona

Breve história da Internet

A Internet surgiu nos anos 60, em um projeto de defesa
norte americano de pesquisa militar. O governo criou uma
rede de ampla abrangência territorial, que conectava
diversos pontos do território nacional e através da qual se
poderia transitar informações.

Essa rede se expandiu rapidamente, passando a abranger
cientistas e pesquisadores de todo pais e posteriormente
abrangendo
empresas.
também
as
universidades,
bibliotecas
e
Como a coisa funciona

World Wide Web, WWW, W3 ou apenas Web

Na década de 90, Tim Berners-Lee, o inventor da Web, trabalhava na
Seção de Computação do CERN (Organização Européia de Pesquisa
Nuclear), sediada em Genebra, na Suíça, quando iniciou pesquisas
visando descobrir um método que possibilitasse aos cientistas do
mundo inteiro compartilhar eletronicamente seus textos e pesquisas, e
que tivesse a funcionalidade de interligar esses documentos.

A Web é um conjuntos caleidoscópico de milhões de arquivos de todo
o tipo que podem ser acessados via internet: documentos de texto,
imagens, vídeos, áudios e principalmente as nossas páginas HTML;

Para tanto, Tim Berners-Lee inventou o protocolo HTTP, e linguagem
HTML e construiu o primeiro navegador (Nexus);
Como a coisa funciona

HT... o quê ?

HTTP (Hiper Text Transfer Protocol) é um protocolo utilizado na Web para
distribuir e recuperar informações;

O HTML (Hipertext Markup Language) é uma linguagem usada para criar
páginas
Web,
que
tem
duas
características
essenciais:
hipertexto
e
universalidade.

Hipertexto quer dizer que você pode criar um link (vínculo) em uma página, que
conduza a outra página ou a praticamente qualquer outro tipo de arquivo da
Web. Significa que a informação pode ser acessada a partir de pontos
diferentes. Tim Berners-lee queria que a Web trabalhasse mais como o cérebro
de uma pessoa que como uma fonte estática de dados, tal como um livro

Universalidade quer dizer que pelo fato dos arquivos HTML serem gravados
como do tipo somente texto ou ASCII, podem ser lidos por qualquer computador,
isso também faz das páginas HTML arquivos de rápido carregamento.
Como a coisa funciona

O que é uma página Web ?

Uma página Web é um arquivo do tipo HTML ou escrito em
alguma outra linguagem de programação (PHP, ASP, .NET,
Java, etc.) que pode conter elementos de texto e TAGS –
comandos que informam sobre a formatação dos elementos
da página, criam vínculos para exibição de imagens, áudios,
vídeos, etc. Esse conjunto de texto e TAGS consiste no que
chamamos de Código Fonte do arquivo.
Como a coisa funciona

O que é uma página Web ?

Para ver o código fonte de uma página HTML basta
acessar: Menu principal do navegador > Exibir > Código
Fonte.
Entendendo a Web
Exemplos
Exemplos
Exemplos
Softwares Necessários


Navegadores (browsers)
Editores de HTML
•Bloco de Notas (Win)
•WordPad (Win)
•Simple Text (Mac)
•BBEdit (Mac)
•Dreamweaver (Win/Mac)
•FrontPage (Win)
•HTMLKit (editor gratúito/Win)
•CoffeCup Free (editor gratúito/Win)
•Eclipse (Win/Linux/)

Cliente FTP
•Dreamweaver (Win/Mac)
•FireFTP (FTP gratúito/Win)
•FileZilla (FTP gratúito/Win)
•Smart FTP (Win)

Servidor Web
•Apache
•IIS
•TomCat
•Jboss
Linguagens

Linguagens de Browser:
◦ HTML
◦ JavaScript
◦ CSS

Linguagens do Servidor:
◦ PHP
◦ ASP
◦ Java
Servidor de Aplicação



Estes servidores oferecem recursos comuns a
diferentes aplicações (autenticação, conexão à
BDs, suporte a transação, etc)
Pensando-se numa arquitetura em camadas, um
servidor de aplicação é um servidor que hospeda e
oferece serviços para outras aplicações
Com isso, espera-se que os desenvolvedores
poupem tempo para implementação da lógica do
negócio
Servidor de Aplicação

Exemplos:
◦ Java: JBoss (Red Hat), WebLogic (BEA), WebSphere (IBM),
Geronimo (Apache), Sun Application Server (SUN), Glassfish
(baseado no da SUN)
◦ Microsoft: .NET Framework
◦ PHP: Apache
Apache
Servidor web mais utilizado no mundo atualmente
(Fonte: Netcraft)
 Software Livre
 Escrito em C
 Executa diversas linguagens script: PhP, Perl, ASP,
etc.
 Possui suporte nativo ao MySQL
 Permite definição de módulos para extensão do
servidor
◦ Exemplo: suporte para JSP
 Mais adiante, utilizaremos ele ao aprender PHP.

Web Standards

Estatísticas de Browsers:
Web Standards

Web Standards pode ser traduzido como "Normas
para Web". Tem por finalidade a padronização e a
criação de uma "Web universal".

Conjunto de tecnologias criadas pela W3C.
HTML, XHTML, CSS, entre outras.
Padronização na exibição (browser);
Maior facilidade na manutenção;
Ranking de buscas (bem escrito);
Otimização de páginas web (performance)





Conceitos Básicos
HTML (Linguagem de Marcação de Hiper Texto)
 Documento de texto contendo tags de marcação
que informam ao browser como exibir a página.
 Considerada a base de todas as outras linguagens
para o desenvolvimento de projetos Web.
XHTML (eXtensible Markup Language)
 Versão melhorada do HTML baseada no XML
 Sintaxe regular e previsível que facilita a leitura e
interpretação nos browsers.
Estrutura de um documento
HTML

Uma página HTML é divida em três partes básicas: a
estrutura principal, o cabeçalho e o corpo do programa.

Todo página HTML deve
começar com a TAG <HTML> e
ser encerrado com </HTML>. A
área do cabeçalho é opcional e
é delimitada pelo par de TAGS
<HEAD> </HEAD>.

A maioria dos comandos serão
colocados na área corpo do
documento, formado pelas
TAGS <BODY> </BODY>
TAGS HTML
Os Tags consistem do sinal de <, seguida pelo nome da
instrução ou comando e fechada por >.
Ex: <p>
 Geralmente as Tags aparecem em pares:
Ex: <H1> Título </H1>
 A Tag com ( / ) significa
que está fechando a Tag sem barra.

Criando a primeira página HTML

O HTML básico:

Chamamos de HTML básico aquele que contém todas as
linhas obrigatórias e essenciais para o bom funcionamento
de sua página Web. Todas as Tags apresentadas aqui
aparecem uma única vez em cada arquivo HTML.
No Futuro, este conteúdo será estendido, mas em princípio
considere aprender as linhas de código abaixo:


Abra o bloco de notas, digite o código acima e salve como “hello.html”,
depois execute o arquivo.
HTML - Cabeçalhos

O HTML básico:

São usados para títulos e subtítulos do conteúdo de texto de
uma página;
A linguagem HTML possui 6 níveis de cabeçalho, numeradas
de 1 a 6, sendo o número 1 de maior destaque.
Cabeçalhos são exibidos em letras maiores e em negrito.


HTML - Parágrafos

O HTML básico:

A marcação <P> é utilizada para definir o fim e início de um
bloco de texto (Parágrafo);
O HTML não reconhece quebra de linha, colocada com a
tecla ENTER do bloco de notas. No HTML utiliza-se da tag
<P> para tal recurso.

HTML – Quebras de linhas

O HTML básico:

A marcação <br/> provoca uma quebra de linha sem
acrescentar a linha extra entre elas, como faz a tag <p>.
HTML – Listas não enumeradas

O HTML básico:

A marcação <ul> funciona em blocos e necessitam da tag
auxiliar <li> para realizar seu trabalho. Ao abrir o bloco com a
tag apropriada você deverá usar uma seqüência de linhas
apoiadas pela segunda tag <li>, que complementa a
primeira.
HTML – Listas enumeradas

O HTML básico:

Uma lista ordenada, ou numerada é semelhante a uma lista
não numerada, exceto porque utiliza a marcação <ol> ao
invés de <ul>. Vamos ao exemplo:
Vamos praticar um pouco ?

Crie uma página HTML que gere o
seguinte conteúdo:
HTML – Links

O HTML básico:

Links em HTML são definidas com a tag <a>
<a href="http://www.peopleuberlandia.com.br">Isso é um link</a>
O endereço do link é especificado no atributo href .
Os atributos são usados ​para fornecer informações adicionais
sobre os elementos HTML.
Outros atributos da tag <a>:
Target = _blank : abre o link em outra página
HTML – Inserindo imagens

O HTML básico:

Imagens HTML são definidas com a tag <img>

O arquivo de origem ( src ), um texto alternativo ( alt ) e tamanho
( largura e altura ) são fornecidos comoatributos :
<img src=“cruzeiro.jpg" alt=“Campeão" width="104" height="142">
Vamos praticar um pouco ?

Crie seu primeiro site com todos os
elementos/tags vistas hoje:
◦
◦
◦
◦
◦
◦
<h1>...<h5>
<p>
<br>
Links
Imagens
Listas numeradas e não numeradas
Desenvolvimento web

Além das ferramentas de
desenvolvimento disponíveis, o
desenvolvedor deve ser
conhecedor dos padrões de
desenvolvimento e linguagens
utilizadas na web.

Conhecimento é tudo,
ferramenta só ajuda...

Dúvidas ?
Envie e-mail para:
[email protected]
Obrigado !