O documento apresenta informações sobre um curso de desenvolvimento web ministrado pelo professor Rodrigo Santa Maria, incluindo sua formação acadêmica, experiência profissional e objetivos do curso.
2. Sobre o Prof. Rodrigo Santa Maria
S Bacharel em Ciência da Computação (PUC Minas);
S Especialista com MBA Internacional em Gerenciamento de
Projetos (FGV/Ohio University, USA);
S Professor Universitário (UNIFEOB);
S Micro-empresário da área de TI;
S Acesse: www.digitallymade.com.br
S E-mail: rodrigo@digitallymade.com.br
3. Sobre o Prof. Rodrigo Santa Maria
S Analista/Desenvolvedor de aplicações desde 2000;
S Ex-IBMer (de 2009 a 2013);
S Diretor-Presidente/Co-fundador do Instituto Internacional
de Ideias;
S Fundador do Google Developers Group São João da Boa
Vista;
4. “Você precisa correr cada vez mais rápido,
apenas para continuar no mesmo lugar.”
Lewis Carroll
O Profissional de TI
5. Visão Geral
S Ao final deste curso, você será capaz de:
S Criar páginas HTML5;
S Utilizar folhas de estilo CSS3;
S Utilizar JavaScript e o framework jQuery;
S Criar páginas com funcionalidades Ajax;
S Utilizar frameworks como o Bootstrap;
6. Desenvolvimento Web
MÓDULO 01
S Pauta:
Ø Introdução ao Desenvolvimento Web
Ø Introdução à comunicação na internet
Ø O protocolo HTTP
Ø As páginas da internet
Ø O servidor web (Apache)
Ø O ambiente de desenvolvimento e nossas ferramentas
Ø HTML Base
Ø Tags HTML
Ø Exercícios
8. S O cliente (navegador web) requisita uma página ao servidor.
S O servidor web responde a requisição com a página requisitada e
a envia ao cliente.
Cliente
(Navegador Web) Servidor Web
Armazenamento
(HD)
Armazenamento
(Banco de Dados)
Requisição
Resposta
Comunicação na Internet
9. S Hypertext Transfer Protocol (HTTP) é o protocolo
utilizado para enviar e receber informações na web.
S É baseado em requisições e respostas entre clientes e
servidores.
S Exemplo de requisição HTTP:
S GET / HTTP/1.1
S Foi criado especificamente para a World Wide Web.
Protocolo HTTP
10. S Os clientes de uma conexão HTTP são os browsers
(navegadores).
S São capazes de enviar requisições em protocolo HTTP e
processar os retornos recebidos, exibindo as páginas da
web.
S Exemplos: Google Chrome, Internet Explorer, Edge,
Mozilla Firefox, Opera, etc.
Clientes HTTP
11. S São serviços HTTP que disponibilizam as páginas na
Internet.
S Exemplos:
S Apache HTTP Server
S Microsoft Internet Information Services
S Nginx
Servidores HTTP
12. S São codificadas em linguagem HTML (HyperText
Markup Language, que significa Linguagem de
Marcação de Hipertexto).
S Possuem ligações de hipertexto.
S São hospedadas por um servidor web.
Páginas da Internet
13. Vantagens
S Portabilidade da solução no lado do cliente.
S Facilidade de deployment.
S Facilidade de manutenção, restauração e
atualização da aplicação.
14. Desvantagens
S Número expressivo e crescente de dispositivos
diferentes com acesso a web (computação ubíqua).
S Compatibilidade entre browsers.
S Novos desafios para a Engenharia de Software:
S Metodologias voltadas para o desenvolvimento web.
S Computação Concorrente.
15. Execução no Cliente (Browser)
S HTML
S CSS
S Tableless
S JavaScript
S XML
17. HTML
S Hyper Text Markup Language
S Especificação definida pelo consórcio W3C: http://www.w3.org/
S Um arquivo html contém marcadores (tags)
S Estes marcadores indicam para o navegador (browser) como a
página deve ser apresentada
S Marcadores usualmente vem em pares: <tag>...</tag>
S Também podem aparecer de forma abreviada: <tag
atributo=“valor” ... />
19. Estrutura HTML
S Um documento HTML válido precisa seguir
obrigatoriamente a estrutura composta pelas tags <html>,
<head> e <body> e a instrução <!DOCTYPE>. Vejamos
cada uma delas:
S A tag <html>
S Na estrutura do nosso documento, antes de tudo, inserimos
uma tag <html>. Dentro dessa tag, é necessário declarar
outras duas tags: <head> e <body>. Essas duas tags são
"irmãs", pois estão no mesmo nível hierárquico em relação à
sua tag "pai", que é <html>. <html> <head></head>
<body></body> </html>
20. Estrutura HTML
S A tag <head>
S A tag <head> contém informações sobre nosso documento que
são de interesse somente do navegador, e não dos visitantes do
nosso site. São informações que não serão exibidas na área do
documento no navegador.
S A especificação obriga a presença da tag de conteúdo <title>
dentro do nosso <head>, permitindo especificar o título do nosso
documento, que normalmente será exibido na barra de título da
janela do navegador ou na aba do documento.
21. Estrutura HTML
S Configuramos qual codificação utilizar em nosso
documento por meio da configuração de charset na tag
<meta>. Um dos valores mais comuns usados hoje em dia é
o UTF-8, também chamado de Unicode. Há outras
possibilidades, como o latin1, muito usado antigamente.
S O UTF-8 é a recomendação atual para encoding na Web
por ser amplamente suportada em navegadores e editores de
código, além de ser compatível com praticamente todos os
idiomas do mundo. É o que usaremos no curso.
S <meta charset="utf-8">
22. Estrutura HTML
S A tag <body>
S A tag <body> contém o corpo do nosso documento, que é
exibido pelo navegador em sua janela. É necessário que o
<body> tenha ao menos um elemento "filho", ou seja, uma
ou mais tags HTML dentro dele.
23. A instrução DOCTYPE
S O DOCTYPE não é uma tag HTML, mas uma instrução
especial. Ela indica para o navegador qual versão do HTML
deve ser utilizada para renderizar a página. Utilizaremos <!
DOCTYPE html>, que indica para o navegador a utilização
da versão mais recente do HTML - a versão 5, atualmente.
S Usaremos:
S <!DOCTYPE html>
25. HTML - Tags Básicas
Tag Descrição
<html> Define um documento HTML
<body> Define o corpo de um documento
<h1> ... <h6> Define cabeçalhos 1 a 6
<p> Define um parágrafo
<br> Insere uma quebra de linha
<hr> Define uma linha horizontal
<!-- --> Define um comentário
26. HTML - Tags de Formatação
Tag Descrição
<b> Formata um texto em negrito
<big> Formata um texto com fonte maior
<em> Formata um texto com ênfase
<i> Formata um texto em itálico
<small> Formata um texto com fonte pequena
<strong> Formata um texto em destaque
<sub> Formata um texto subscrito
<sup> Formata um texto sobrescrito
<ins> Formata um texto sublinhado
<del> Formata um texto anulado
27. HTML Entidades
S Utilizadas para apresentação de caracteres
especiais em html. Ex.: “<“
Saída Descrição Nome da Entidade Número
Espaço sem quebra  
< Menor que < <
> Maior que > >
& E comercial & &
" Aspas " "
' Apóstrofo ' (não funciona no IE) '
28. HTML Links e Imagens
S <a href=“www.pucpcaldas.br”>Página PUC</a>
S Página da PUC
S <a name=“endereco”>Como Chegar</a>
S Trecho da página que informa detalhes sobre localização
S <a href=“www.pucpcaldas.br#endereco”>
Localização</a>
S Localização
S <img src=“logo.png” alt=“Logo da PUC”/>
29. HTML Tabelas
<table border="1">
<thead>
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>linha 1, valor 1</td>
<td>linha 1, valor 2</td>
</tr>
<tr>
<td>linha 2, valor 1</td>
<td>linha 2, valor 2</td>
</tr>
</tbody>
</table>
30. HTML Background e Fontes
S Formas de se definir um background preto para o
corpo da página
S <body bgcolor="#000000">
S <body bgcolor="rgb(0,0,0)">
S <body bgcolor="black">
S Definindo uma imagem de fundo
S <body background="logo.gif">
S <body background="http://www.pucpcaldas.br/bg.gif">
S Configurando uma fonte
S <font size="2" face="Verdana">Texto com fonte específica.</
font>
31. HTML Formulários
S HTML possibilita a criação de formulários online utilizando tags
S A tag <form> é a mais comum e permite a criação de um formulário de
entrada de dados
<body><form>
Nome: <input type="text" name="firstname"><br />
Sobrenome: <input type="text" name="lastname"><br />
Senha: <input type="password" name="senha">
</form></body>
32. HTML Formulários
S Tipos que podem ser utilizados com a tag <input type=“?”>:
S button: Insere um botão
S checkbox: Insere um checkbox; para vários itens, basta inserirmos vários
“inputs” deste tipo
S file: Insere botão seleção de arquivo através de uma caixa de diálogo
S hidden: Campo pertencente ao formulário, mas que não será exibido na
página
S image: Insere uma imagem como um botão submit
S password: Insere um campo password (caracteres digitados não aparecem)
S radio: Insere um radiobox (análogo ao checkbox)
S reset: Restaura os valores iniciais do formulário
S submit: Encaminha os dados inseridos para algum arquivo
S text: Insere um campo de edição de texto
33. HTML Formulários
S Quando algum elemento do tipo “submit” é inserido num
formulário e acionado, seus dados são enviados para um arquivo.
S O arquivo mencionado é indicado pelo atributo “action” do
elemento <form>.
S Este arquivo deverá estar armazenado num servidor web
(Apache, Tomcat, IIS, ...), e estará escrito em alguma linguagem
de programação de servidores (server-side):
php, jsp, asp, sevlets, ...
35. HTML
Outras tags de Formulários
Tag Descrição
<form> Define um formulário para entrada do usuário
<input> Define um campo de entrada
<textarea> Define um campo texto com múltiplas linhas
<label> Define um label para algum controle
<fieldset> Desenha uma caixa em torno de um conjunto de elementos
<legend> Define um título para um <fieldset>
<select> Cria uma lista drop-down
<optgroup> Criar uma hierarquia nas opções de uma lista drop-down
<option> Uma opção na lista drop-down
<button> Insere um botão. Difere de <input> por poder conter algum
conteúdo, como uma imagem
36. HTML Listas Não Ordenadas
S Uma lista não ordenada é uma lista de itens. As listas de
itens são marcadas com bullets (tipicamente pequenos
círculos pretos).
S Uma lista não ordenada começa com a tag <ul>. Cada item
da lista começa com a tag <li>:
<ul>
<li>Café</li>
<li>Leite</li>
</ul>
37. HTML Listas Ordenadas
S Uma lista ordenada é também uma lista de itens. As listas
de itens são marcadas com números.
S Uma lista ordenada começa com a tag <ol>. Cada item da
lista começa com a tag <li>.
S <ol>
<li>Café</li>
<li>Leite</li>
</ol>
38. Meta Tags HTML
S Meta Tag é um comando implementado no código de
páginas web, dentro da área Head do site (entre as tags
<head> e </head>) para passar instruções a programas
externos ou ações mais simples, como por exemplo
informar qual a pessoa responsável pelo desenvolvimento da
página. Algumas Meta Tags são utilizadas para passar aos
sites de busca como o Bing e o Google instruções sobre o
título da página e uma breve descriçao a ser exibida nos
resultados de busca, quais páginas devem ou não ser
indexadas, dentre outras instruções.
39. Meta Tags HTML e SEO
S Meta Tags são uma importante ferramenta de comunicação
entre o webmaster e os sites de busca. Para muitas pessoas,
porém, SEO é apenas isso, Meta Tags. Isso está longe de
ser verdade. O Google utiliza perto de 250 variáveis para
determinar os resultados de busca, e as meta tags são apenas
algumas delas.
40. Meta Tags HTML e SEO
<html>
<head>
<title>Aprendendo sobre as meta tags </title>
<meta name="author" content="Erika Sarti”>
<meta name="description" content="Meta Tags - O que são e como
utilizá-las”>
<meta name="keywords" content="sites, web, desenvolvimento”>
</head> ...
42. Estrutura de Arquivos
S Como todo tipo de projeto de software, existem algumas
recomendações quanto à organização dos arquivos de um
site.
S Não existe obrigatoriedade ou padrão específico a seguir,
pois pode variar com cada projeto, mas recomenda-se criar/
seguir um padrão qualquer que seja.
43. Estrutura de Arquivos
S Como um site é um conjunto de páginas Web e é comum
todos os arquivos de um site estarem dentro de uma só pasta
e, assim como um livro, é recomendado que exista uma
"capa", uma página inicial que possa indicar para o visitante
quais são as outras páginas que fazem parte desse projeto e
como ele pode acessá-las, como se fosse o índice do site.
S Esse índice, não por coincidência, é convenção adotada pelos
servidores de páginas Web. Se desejamos que uma
determinada pasta seja servida como um site e dentro dessa
pasta existe um arquivo chamado index.html
44. Estrutura de Arquivos
S Dentro da pasta do site, no mesmo nível que o index.html, é
recomendado que sejam criadas mais algumas pastas para
manter separados os arquivos de imagens, as folhas de estilo
CSS e os scripts.
45. Editores e IDEs
S Existem editores de texto como Gedit (www.gnome.org),
Sublime (http://www.sublimetext.com/) e Notepad++
(http://notepad-plus-plus.org), que possuem realce de
sintaxe e outras ferramentas para facilitar o
desenvolvimento de páginas. Há também IDEs (Integrated
Development Environment), que oferecem recursos como
autocompletar e pré-visualização, como Eclipse e Visual
Studio.
S Neste curso utilizaremos o Eclipse PDT, uma versão do
Eclipse modificada para desenvolvimento web e PHP.
47. Exercícios
S Preparar uma página que inclua os seguintes elementos:
S título com o nome dos alunos;
S texto com um pequena saudação;
S Incluir na página anterior as seguintes informações:
S autor;
S palavras-chave.
S Fazer com que a página tenha três parágrafos:
S a saudação já existente;
S uma descrição da sala de aula;
S uma descrição da roupa de um colega ao lado.
48. Exercícios
S Incluir headers (<H1>) para cada um dos parágrafos.
S Formatar o nome do colega (que aparece no parágrafo da
roupa) de forma a aparecer: todo o nome em ênfase, com o
sobrenome adicionalmente forte (strong).
S Inserir em sua página a poesia "Batatinha quando nasce...",
em destaque (<BLOCKQUOTE>), e se lembrando de
mudar de linha onde requerido.
49. Exercícios
Criar uma lista como a seguinte:
• Pais
• João Silva
• Maria Silva
• Irmãos
• João Silva Jr.
• Maria Aparecida Silva
• José Silva
• Primos
• Nenhum
• Cores Favoritas Preto
1. Branco
2. Cinza