Programacao Web Parte1

05/03/2015

1

Programação WebProf. MSc. Alan Souza

[email protected]

2014

Situe-seProgramação Web

Disciplina do 4º semestre (+4 para completar)

Pré-requisitos:

• Lógica de Programação |||||

• Programação Orientada a Objetos |||||

• Banco de dados |||

• Idioma inglês |||

Vai ser importante para:

• Desenvolvimento de Sistemas: web;

• Projeto de Interfaces Web.

05/03/2015

2

#Avisos

1. Você vai precisar praticar (sozinho)!

2. Não se iluda somente assistindo aulas;

3. Presença em sala escada;

4. Primeiro prestar atenção na explicação e depois fazer;

05/03/2015

3

Conteúdo resumido

1. HTML(5)

2. CSS(3)

3. Javascript

4. JEE (Java Enterprise Edition)

1. Servlets

2. Java Server Pages (JSP)

3. Integração com Banco de Dados (JDBC)

Internet

05/03/2015

4

Internet

Internet

05/03/2015

5

Internet

Internet

05/03/2015

6

Internet

Internet

05/03/2015

7

Internet

Internet

05/03/2015

8

Outros acontecimentos...

2012 Microsoft reformula o SkyDriveGoogleDrive também reformulado

2012/2013 Crescimento do Whatsapp

junho/2013 Waze – status do trânsito em tempo real

abril/2014 Marco Civil da Internet

setembro/2014 Fim do Orkut

janeiro/2015 Whatsapp também pode ser usado através do computador

Fonte: Pesquisa Anual do Uso de TI – FGV-SP, 2014.Link: http://eaesp.fgvsp.br/ensinoeconhecimento/centros/cia/pesquisa

05/03/2015

9



05/03/2015

10


Aplicações Web estão em alta;

Aplicações Web x Aplicações Standalone

Por que aprender HTML e CSS?

05/03/2015

11


APLICAÇÕES WEB

Vantagens Desvantagens

Só precisaria de um navegador de

internet (browser) para usar.

É necessário possuir uma conexão

ativa com internet/intranet.

Escalabilidade no processamento.

Se for necessário aumentar o poder

de processamento, basta fazer no

servidor.

Incompatibilidade entre navegadores

de diferentes fabricantes.

Manutenção e atualização

facilitada, pois estaria centrada

somente no servidor.

Desenvolvimento de interface

complexa.

Multiplataforma (Windows, Linux,

Apple, Smartphones, Tablets...) Segurança: exposição mundial.


APLICAÇÕES DESKTOP

Vantagens Desvantagens

Velocidade de resposta maior.

Dificuldade para distribuir a aplicação

e as atualizações (manutenção em

cada cliente).

Permite acessar recursos da

máquina cliente (porta USB, porta

serial...).

Desenvolvimento de interface

simplificado.

Segurança: exposição somente

local.•Chave de ativação do produto

05/03/2015

12


• Boa parte ou 100% dos seus futuros projetos irá rodar no Navegador de Internet (projetos web);

• É importante ter uma base de conhecimento sólida em relação às tecnologias front-end;

• Imagine trabalhar em uma gráfica, sem ter noção de tipos de papel, tonalidade de cores, etc...

Navegadores de Internet

• Códigos HTML e CSS ganham vida através do Navegador de Internet(conhecido como browser também);

• INCOMPATILIBIDADE ENTRE OS DIVERSOS NAVEGADORESEXISTENTES

05/03/2015

13

HTML – Estrutura básica do arquivo HTML

<!doctype html>

<html>

<head>

<title>Estrutura do arquivo HTML</title>

</head>

<body>

<p>Exemplo de parágrafo HTML</p>

</body>

</html>

HTML – Principais Tags

Exemplo de Tag Descrição

<h1> Isto é um cabeçalho </h1>



Tag de cabeçalho. Pode ir de <h1> até <h6>. À

medida que o número cresce, a letra na tela

diminui.

<p> Isto é um parágrafo. </p>

<p> Isto é outro parágrafo. </p>

Tag para formar parágrafo.

<a

href="http://www.google.com.br">Isto

é um link para o site Google</a>

Tag para formar hiperlinks para outras páginas,

para um arquivo ou para uma determinada parte

da página web (âncora).

O conteúdo de um link também pode ser uma

imagem.

<img src="casa.jpg" width="104"

height="142" alt=”Imagem de casa”/>

Tag para mostrar uma imagem na página HTML.

05/03/2015

14

Tag Descrição

<br> ou <br/> Quebra de linha no texto.

<hr> ou <hr/> Desenha uma linha separadora.

 Insere comentário no código HTML.

São ignorados pela interpretação do

browser.

<b> Texto em negrito </b> Define o texto em negrito.

<i> Texto em itálico </i> Define o texto em itálico.

<sub> Texto subscrito </sub> Mostra o texto subscrito.

<sup> Texto sobrescrito </sup> Mostra o texto sobrescrito.

HTML – Principais Tags

HTML – Principais Tags do HEAD

Tag Descrição

<head> Define informações sobre o documento HTML.

<title> Define o título do documento HTML.

<base> Define o endereço padrão ou um alvo padrão para todos os

links da página.

<link> Realiza uma relação entre um documento HTML e outros

documentos externos.

<meta> Define metadata para um documento HTML.

<script> Define um script do tipo client-side (lado do cliente).

<style> Define informação de estilo para o documento.

05/03/2015

15

HTML – Principais Atributos HTML

Atributo Descrição

class Especifica um ou mais nome de classe para um elemento.

Serve para referir classes de estilo CSS.

id Especifica um único identificador para um elemento. Em

XHTML, não se pode repetir IDs.

style Especifica um estilo CSS para um elemento.

title Especifica informação extra sobre um determinado

elemento. Pode mostrar esta informação em um tool tip.

tabindex Especifica a ordem de TAB de cada elemento.

HTML – Tags de Tabelas HTML

Tag Descrição

<table> Cria a tabela.

<th> Define uma célula de cabeçalho na tabela

<tr> Cria uma linha na tabela.

<td> Cria uma célula na tabela.

<caption> Cria um título para a tabela.

<colgroup> Especifica um ou mais grupos de colunas na tabela para formatação.

<col> Especifica propriedades para cada coluna dentro do elemento

<colgroup>

<thead> Agrupa o conteúdo do cabeçalho da tabela.

<tbody> Agrupa o conteúdo do corpo da tabela.

<tfoot> Agrupa o conteúdo do rodapé da tabela.

05/03/2015

16

HTML – Atributos de tabelas HTML

Atributo Descrição

align Alinhamento da tabela.

border Adiciona borda na tabela.

colspan Mescla células dispostas em colunas.

rowspan Mescla células dispostas em linhas.

HTML – Tags de Listas HTML

Tag Descrição

<ol> Define uma lista ordenada

<ul> Define uma lista não ordenada

<li> Define um item de uma lista

<dl> Cria uma lista definida

<dt> Cria um item da lista definida

<dd> Cria uma descrição de um item de lista definida

05/03/2015

17

HTML – Caracteres Especiais

á á Á Á ã ã Ã Ã â â Â Â

à à À À é é É É ê ê Ê Ê

í í Í Í ó ó Ó Ó õ õ Õ Õ

ô ô Ô Ô ú ú Ú Ú ç ç Ç Ç

• Os problemas de caracteres especiais se dão em virtude do tipo decodificação de cada navegador de internet.

• O ideal é configurar o parâmetro charset com o valor UFT-8 dentro do head:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

HTML – O elemento DIV

1.Trata-se de uma tag, escrita como <div> conteúdo... </div>,

que serve para criar blocos no arquivo HTML;

2.Hoje em dia, é muito utilizada para criar layouts, pois se

integra facilmente com folhas de estilo;

3.É a base do conceito de “tabless”, que significa a utilização

unicamente de divs para construir o layout de um site;

05/03/2015

18

HTML – O elemento DIV - Exemplo

Código-fonte: <div id=”div1” class=”classDiv1”> <p> <b> Conteúdo da div </b> </p> <a href=”http://www.google.com.br/”>link para o Google</a> </div>

Resultado: Conteúdo da div link para o Google

HTML – Exercício 1

Gerar o código HTML que

produz a tela ao lado:

05/03/2015

19

HTML – Exercício 2

A partir do código HTML mostrado, desenhe/escreva o que

será mostrado no browser.

Link para o código

Documents

Programacao Web Parte1