desenvolvimento web com banco de dados html. ementa arquiteturas computacionais para web....
TRANSCRIPT
Desenvolvimento Web com Banco de Dados
HTML
Ementa Arquiteturas Computacionais para Web. Tecnologias da Informação para
Desenvolvimento de Sistemas em Internet.
Linguagens de Programação do ambiente Web.
Banco de Dados para Web. Programação no ambiente Cliente-
Servidor Web.
ObjetivoCapacitar o aluno a conhecer as
principais tecnologias usadas na Web bem como as linguagens de programação usadas no desenvolvimento de aplicações que são acessadas pela Internet.
Programa da Disciplina Apresentação da disciplina e conceitos
básicos
A Internet e a Web Histórico da Web Arquitetura Web. Requisições HTTP. HTML / ASP / JavaScript / Cascading Style Sheets
(CSS)
Programa da Disciplina Desenvolvimento de Sistemas Baseados
na Web Linguagem de programação para Web (C#)
Banco de Dados para Web Conceitos Básicos SQL SQLServer
Exemplo de Aplicações E-Commerce E-Business
A WEB
NavegadorWEB
ServidorWEB
Servidor deBD
O que o navegador faz?
Acessa a informação na rede. Lida com a formatação e a exibição
dos documentos.
ServidorNavegadorPáginas
O que o navegador faz
URL – É o ponteiro para algum dado na WEB, seja um documento WEB, um arquivo FTP, um endereço de E-mail...
URL
Uniform Resource Locators
ServidorNavegador
Acessa a informação na rede
O que o navegador faz
HTML – Hipertext Markup Language Linguagem de marcação de hipertexto
XHTML – XML - Extensible Markup Language Linguagem de marcação extensível
DHTML – HTML Dinâmico Maior interação com o usuário e páginas de estilo
Lida com a formatação e a exibição dos documentos
Terminologia Site da WEB – Conjunto de uma ou mais
páginas, vinculadas de forma significativa. Servidor WEB – Um computador que
armazena um ou mais sites da WEB. Páginas da WEB – Um único elemento de
um site, geralmente uma página html, sendo a página html um conjunto de tags html.
Home Page – (Página inicial) – Página de entrada para um site Web.
Macromedia Dreamweaver Macromedia HomeSite Microsoft Frontpage Hot Dog ...
Vamos usar um editor de texto para ter uma idéia do que o html realmente é, antes de ir para um editor que oculte as tags.
Programas para escrever em HTML
Boa prática de programação 1 As marcas da HTML não distinguem letras
maiúsculas ou minúsculas. Contudo, manter todas as letras em uma única caixa melhora a legibilidade do programa. Aconselha-se escrever em letras minúsculas.
Dê nomes aos seus arquivos que descrevam sua funcionalidade. Essa prática pode ajudá-lo a identificar mais rapidamente os documentos. Também ajuda as pessoas que querem definir um link para a sua página, ao lhe fornecer um nome fácil de lembrar para o arquivo.
Observação Os erros em marcação HTML
normalmente não são fatais. O navegador fará de tudo que puder para exibir sua página, embora não da maneira pretendida.
Boa prática de programação 2 Coloque comentários no seu código. Os
comentários ajudam outros programadores a compreender o código, auxiliam na depuração e listam outras informações úteis que você não quer que sejam exibidas pelo navegador.
<!-- O comentário vem aqui -->
Estrutura de um arquivo HTML
Um arquivo HTML é composto de três partes.1. Uma linha contendo informações da versão
do HTML. 2. Uma seção de cabeçalho declarativa
(delimitada pelo elemento HEAD)3. Um corpo, o qual contêm o conteúdo do
documento. O corpo pode ser implementado pelo elemento body ou pelo elemento frameset.
Estrutura de um arquivo HTML
A Tag <html> - A primeira tag da estrutura de página em qualquer página html, ela indica que o conteúdo do arquivo está na linguagem html.
A Tag <head> - Prólogo para o restante do arquivo, apenas algumas tags entram na parte <head>, nunca colocar texto no head (cabeçalho).
A Tag <body> - É o corpo da página, incluindo texto e outros conteúdos.
As sintaxes de uma tag <NOMETAG>Faculdade Hélio Rocha</NOMETAG>
<NOMETAG ATRIBUTOS=“” >Faculdade Hélio Rocha</NOMETAG>
<NOMETAG ATRIBUTOS=“” />
<NOMETAG>
Uma página HTML<html><head><title> Uma página HTML
</title></head><body>Esta é uma página HTML</body></html>
Tag <TITLE> O elemento title nomeia sua página Web.
O título normalmente aparece na barra colorida no topo da janela do navegador, e também aparecerá como o texto que identifica sua página se um usuário acrescentar sua página ao Bookmark.
O título também é usado por mecanismo de busca para finalidades de catalogação.
Tag <TITLE>
Tags <H1> até <H6> (Header ou Cabeçalho)
A Tag <h?> - É uma linha de cabeçalho, sendo usada para dividir a seção de texto. Os números indicam os níveis ( h1 a h6 ).
A tags <H?> podem ter o atributo align = “left” ou “justify” ou “right” ou “center”
Separador - <P> Para separar blocos de texto, usamos o elemento <P>
Separador - <BR> Quando queremos mudar de linha, usamos
o elemento <BR>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos.
Separadores - <P> e <BR>
<P> tem atributo de alinhamento, como os cabeçalhos.
As quebras de linha do texto fonte não são significativas na apresentação de documentos em HTML.
O atributo ALIGN podeter os valores CENTER,
LEFT, RIGHT, JUSTIFY
Separador - <HR> A tag <HR> insere uma linha horizontal. Atributos:
SIZE: Largura. WIDTH: Comprimento. ALIGN: Alinhamento NOSHADE: Sem efeito tridimensional. COLOR: Cor.
Links Referencia-se a outros recursos tais
como: outra página html, arquivos, imagens etc.
Texto ou Imagens podem atuar como hyperlink.
<a href="http://www.ftc.br">FTC</a>
<a href="mailto:[email protected]">Prof. Rômulo</a>
Imagens Três formatos mais populares:
Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG)
<img src=“logotipo.jpg” /> Atributos:
src – Caminho(path) da Imagem. align – Alinhamento da Imagem border – Borda da Imagem alt – Texto da Imagem height – Altura da Imagem width – Largura da Imagem
<html><head>
<title>Título da Página</title></head><body><ol> <li>Link com Texto</li> <a href="http://www.romulopaes.com">Rômulo Paes</a> <br> <li>Link com Imagem</li> <a href="http://www.FTC.br"> <img src="logoFTC.jpg" alt="Faculdade de Tecnologia e Ciências" border="0"/> </a> <br> <li>Link para E-mail</li> <a href="mailto:[email protected]">Romulo</a></ol></body></html>
Tabelas <table> Tabelas implementam um conceito importante de
layout: as “grades”, segundo as quais organizamos textos e ilustrações de maneira harmoniosa.
Como já foi possível perceber, as tabelas contêm textos, listas, parágrafos, imagens, formulários e várias outras formatações - inclusive outras tabelas.
Tabelas – Alguns Atributos Atributo border
Especifica a borda da tabela em pixels.
Atributo summary Descreve o conteúdo da tabela
Atributo caption Título da tabela
Tabelas – Seções Seção Head (Definida pelo elemento thead)
Contêm informações como o nome das colunas. Elemento tr define uma linha da tabela. Elemento th define as colunas na seção head.
Seção Foot (Definida pelo elemento tfoot) Seção Corpo (Definida pelo elemento
tbody) Elemento td define as células que contêm dados.
Normalmente os desenvolvedores só usam tabela com sua estrutura mais simples:<table><tr> <td>Coluna</td></tr><tr> <td>Dado</td></tr></table>
Formulário <form ...>xxx</form>
Atributos method – Indica o modo pelo qual as informações
coletadas no formulário serão enviadas para o servidor Web para processamento.
post – Use em um formulário que produz mudanças nos dados no servidor. Os dados são enviado como uma variável de ambiente, que os scripts são capazes de acessar.
get – Deve ser usado quando o seu formulário não causar mudanças nos dados do lado servidor. Os dados do formulário que usa o get são anexados no final da URL.
action – Especifica para qual URL os dados serão enviados.
Input O elemento input é comum em
formulários e sempre exige o atributo type que indica o tipo, name que fornece um identificador único para o elemento e value que indica o valor que o elemento envia para o servidor.
Input (text) A entrada type=“text” insere uma caixa
de texto de uma linha no formulário. O elemento label fornece uma descrição
para o elemento input. O atributo size especifica a largura do
texto de entrada e o atributo maxlenght define o número máximo de caracteres que o texto a ser inserido aceitará.
Input (hidden) A entrada type=“hidden” insere
uma caixa de texto oculta normalmente usada para enviar informações sem que o usuário perceba.
Os seus atributos são similares ao text.
Input (submit e reset) SUBMIT – Exibe um botão que
permite ao usuário submeter os dados inseridos no formulário ao servidor para processamento.
RESET – Permite que o usuário restaure todos os elementos do formulário a seus valores default.
Input (text, hidden, submit, reset)
Input (password) O campo de entrada da senha
fornece uma maneira para os usuários inserirem informações que eles não desejam que os outros sejam capazes de ler na tela.
Input (password)
Input (Checkbox e Radio) As caixas de seleção podem ser usadas
individualmente ou em grupos. Cada caixa de seleção em grupo deve ter o mesmo name. Isso notifica o script que está tratando o formulário de que todas as caixas de seleção estão relacionadas umas com as outras.
Os botões de radio quanto a sua função são similares às caixas de seleção mas diferem pelo fato de que somente um elemento no grupo pode ser selecionado de cada vez.
Insira o atributo checked para indicar quais botões de rádio você gostaria que fossem selecionados inicialmente.
Input (Checkbox e Radio)
Textarea O elemento textarea insere uma caixa de
texto no formulário. E você especifica o tamanho da caixa com o atributo rows, o qual define o número de linha que vai aparecer na textarea. Com o atributo cols, você especifica qual a largura que deve ter a textarea. Qualquer texto default que você quer colocar dentro da textarea deve estar contido no elemento textarea.
Select O elemento select inserirá uma lista de itens
selecionáveis dentro do seu formulário. Para adicionar um item à lista, adicione ao
elemento select um elemento option contendo o texto a ser exibido.
O atributo selected aplica uma seleção default à sua lista.
Você pode mudar o número de opções visíveis da lista a um só tempo usando atributo size.
Você pode usar o atributo multiple para pode selecionar mais de um.
Frames Os frames, quando usados
adequadamente, podem deixar seu site mais legível e utilizável pelos usuários.
O elemento frameset informa ao navegador que a página contém frames. O atributo cols ou rows fornece o leiaute do conjunto de frames.
O elemento frame especifica quais arquivos comporão o conjunto de frames.
Frames