Desenvolvimento de Aplicações para Internet - Aula 01

Slide 0




Desenvolvimento de Aplicações para Internet

Slide 1

Professor Celso Olivete Júnior

Bacharelado em Ciência da Computação (Unoeste-2002)
Mestrado e Doutorado em Engenharia Elétrica – Área: Visão Computacional (USP-SC-2005/2009)
Áreas de interesse e atuação:

>> processamento de imagens médicas
>> visão computacional
>> desenvolvimento Web

Slide 2

Site do Curso

www.fct.unesp.br/docentes/dmec/olivete/web

>> slides, exercícios, notas e demais materiais estarão disponíveis no site
>> envio de trabalhos e dúvidas através do email

olivete@fct.unesp.br

Slide 3

Estatística do Curso

Slide 4

Objetivos da disciplina

Desenvolver aplicações para a Web utilizando as tecnologias HTML5, JavaScript, CSS3, PHP, AJAX associados ao banco de dados MySQL.

     

Slide 5

Objetivos da disciplina

Desenvolver aplicações baseadas na arquitetura cliente x servidor.

Slide 6

Quem utiliza PHP?

>> Ranking das LP's

Slide 7

Tópicos da disciplina

>> Introdução à Web
>> HTML5 e CSS3
>> JavaScript
>> Linguagem PHP
>> JQuery
>> AJAX
>> Integração com banco de dados MySql
>> Desenvolvimento de projeto

Slide 8

Novidades no HTML5

> Multimídia
> Canvas
> Geolocalização
> Novas tags. Ex: Tag <figure> e <figcaption>
Exemplo
> Outros..



Novidades no CSS3

>Bordas

  • border-color - É possível definir a cor da borda
  • border-image - É possível definir uma imagem como borda
  • border-radius - É possível arredondar os cantos das bordas
  • box-shadow - É possível colocar uma sombra em um determinado Box, elemento ou imagem.
Exemplo

> Background

  • background-origin - Quando colocamos uma imagem de fundo em um elemento de HTML .
  • background-clip - Onde o background começa a ser desenhado.
  • background-size - Tamanho do background.

> Cor

  • cores HSL - Abreviação de hue, saturation e luminosity.
  • cores HSLA - Abreviação de Hue, saturation, luminosity e alfa
  • cores RGB - Abreviação de red, Green, blue.
  • Opacidade - Define a transparência do elemento.

> Outras...

Consultar o site w3schools

Slide 9

Metodologia

- Aulas expositivas teórico-práticas
- Exercícios práticos
- Projetos e/ou seminários em grupos (análise individual)

Slide 10

Critério de Avaliação

Avaliação 1: 26/04
Avaliação 2: 13/06
RER: 20/06

A cada bimestre

Uma prova: NP
Trabalhos: MT
- MB = (7*NP + 3*MT)/10 SE E SOMENTE SE (NP>=5 E MT>=5)

Caso contrário (MT<5 OU NP<5)
MB = Menor Nota (NP ou MT)
Onde:
NP = Nota da prova
MT = Média dos trabalhos
MB = Média do Bimestre

A nota final (NF) do aluno no curso será a média das notas obtidas nos 2 bimestres

>> Caso o aluno não obtenha a nota mínima para aprovação, será oferecida uma terceira avaliação (EXAME) e a Média Final passa a ser obtida pela expressão:
- NFnova = (NFanterior + EXAME)/2

Slide 11

Projeto

Desenvolvido em dupla

Utilizar todas as tecnologias vistas na disciplina

Avaliação do projeto será na forma de apresentação

Notas individuais

Sugestões de temas:

  1. Simulador de Máquinas Universais: Máquinas de Turing com N Fitas, Post e Norma;
  2. Simulador de Autômatos Finitos: AFD, AFND com e sem movimento vazio. Conversão de AFND para AFD;
  3. Simulador de Linguagens Livre de Contexto. Autômatos com Pilhas e Gramáticas Livres de Contexto. Conversão entre modelos;
  4. Analisador léxico e sintático para LALG;
  5. Simulador de Expressões Regulares e Gramáticas Regulares;
  6. Simulador de Redes Neurais;
  7. Sistema Gerenciador para a disciplina de Trabalho de Conclusão de Curso;
  8. Home Page para o WVC (Workshop de Visão Computacional) - conversar com o Piteri;
  9. Demais temas passarão por aprovação do professor.

    10. Informações adicionais na página da disciplina.

Slide 12

Bibliografia básica

[1] Elisabeth Freeman e Eric Freeman. Use a cabeça! HTML com CSS e XHTML.  Rio de Janeiro: Alta Books, 2008.
[2] Duckett, Jon. Introdução à programação Web com HTML, XHTML e CSS. Rio de Janeiro: Ciência Moderna, 2010.
[3] Goodman, Danny. JavaScript & DHTML: guia prático. Rio de Janeiro: Alta Books, 2008
[4] Milani, André. Construindo aplicações web com PHP e MySQL. São Paulo: Novatec, 2010
[5] Wankyu Choi. Beginning PHP 4: programando. São Paulo : Makron Books, 2001
[6] Gonçalves, Edson. Dominando AJAX: as melhores práticas ligadas a aplicações WEB escritas tanto em Java como em PHP 5 utilizando Ajax. Rio de Janeiro: Ciência Moderna, 2006.
[7] Martin Bond. Aprenda J2EE:com EJB, JSP, Servlets, JNDI, JDBC e XML. São Paulo: Pearson Education, 2003.

Slide 13

Introdução ao HTML

>>Hyper Text Markup Language
>> Linguagem de Marcação de Textos

Páginas Web são escritas em HTML

Características:

Descrevem o conteúdo e a estrutura do documento
Qualquer sistema operacional pode interpretar o padrão HTML.

Slide 14

HTML - conteúdo

- Textos
- Tabelas
- Listas
- Imagens e sons
- Movimentos
- Links para outros documentos

Slide 15

Aula 1 - HTML5: nova geração do HTML

HTML5 ainda é um trabalho em andamento

A maioria dos navegadores já suportam muitos dos novos elementos!!

Slide 16

Algumas regras estabelecidas para o HTML5

- Novos recursos devem ser baseados em HTML, CSS, DOM e JavaScript
- Reduzir a necessidade de "plugins" externos (como Flash)
- Melhorar tratamento de erros
- Novos marcadores para substituir "scripts"
- Ser independente do dispositivo
- Processo de desenvolvimento deve ser visível ao público

Slide 17

Ferramentas para criar documentos HTML

Editores de texto

Navegadores Web (FireFox, Internet Explorer, outros)

Publicar documentos HTML

Programa de FTP (para transferir arquivos para o servidor Web)

Slide 18

HTML

Arquivos com extensão: htm ou html

O padrão HTML usa tags para informar o que será transmitido.
Basicamente, um arquivo HTML, é formado por um conjunto de tags.

Slide 19

Estrutura básica de um arquivo HTML

As TAGs aparecem sempre entre sinais de “menor que” (<) e “maior que” (>); A TAG de finalização de um comando é precedida de uma barra (/).

Slide 20

Declarando o tipo de documento HTML

Arquivos HTML devem incluir Document Type Declaration, ou doctype, para indicar o tipo da linguagem de marcação utilizada no documento.

>> Doctype para HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

>> Doctype para XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

>>Doctype para HTML5:
<!DOCTYPE html>

Slide 21

Primeiro documento HTML

Consultar o endereço http://www.w3schools.com

HTML não é case sensitive

Slide 22

Formatando o documento

Estrutura de cabeçalho

As tags <H1> e </H1> até <H6> e </H6> definem títulos de níveis 1 a 6.

Slide 23

Formatando o documento (2)

Parágrafo

Tags <p> e </p>
Atributos align= (right, left, center).
Exemplo de uso:

<p ALIGN=”RIGHT”> Bem vindo ao mundo do HTML </p>

.

Slide 24

Formatando o documento (3)

A tag <body> e seus atributos

<body BgColor=“#00CCFF”>;
HMTL é fácil de
aprender </body>



BgColor=“#00CCFF” - altera a cor do fundo.

Para consultar o valor de uma cor, acesse http://www.w3schools.com/tags/ref_colorpicker.asp

Slide 25

Formatando o documento (4)

Formatando caracteres

Slide 26

Comentários

<!-- Comentário para n linhas -->

Slide 27

Trabalhando com imagens

Tag: <img src=“caminho_da_imagem”> e alguns atributos, como: altura, largura, alinhamento, …

Procure separar arquivos HTML de arquivos de imagens!!

Slide 28

Links

Interliga partes de um texto e imagens a outros documentos. A ligação pode ocorrer entre:

>> Outras páginas.

>> Na mesma página: onde um assunto tem vários tópicos, podemos utilizar índices onde os links têm a função de interligar os tópicos de um texto

Sintaxe:

<a href="url">Texto para o Link</a>

Slide 29

Listas

Listas ordenadas

Contém vários itens numerados e é criada com o elemento <ol> ("ordered list"). Os itens da lista são definidos com o elemento <li>("list item")

Exemplo

  1. Item 1
  2. Item 2
  3. Item 3

Slide 30

Listas

Listas ordenadas - sintaxe

Slide 31

Listas não ordenadas

Exemplo

  • X
  • Y
  • Z

Slide 32

Listas

Listas não ordenadas - sintaxe

Slide 33

Tabelas

A TAG <table> é utilizada para a representação de dados tabulares. A estrutura e o conteúdo da tabela devem ficar dentro das TAGs <table> e </table>

PRINCIPAIS ATRIBUTOS DE <table>
<caption>: especifica o título da tabela
<th>: usada para especificar as células de cabeçalho da tabela.
<td>: especifica as células de dados de uma tabela.
<tr>: indica o início de uma linha na tabela.

Exemplo:

Slide34

Tabelas - mais atributos

BORDER - <TABLE BORDER=5>
ALIGN - <TD ALIGN="CENTER">
VALIGN - <TD VALIGN="TOP"> - alinhamento em relação às bordas superior e inferior
ROWSPAN - <TD ROWSPAN=”3”> - Célula com 3 linhas
COLSPAN - <TD COLSPAN=”3”> - Célula com 3 colunas

Slide 35

Formulário

Slide 36

Formulário

A Tag <FORM> ... </FORM>

Atributos



ACTION: Especifica o URL do script ao qual serão enviados os dados do formulário.


METHOD: Seleciona um método para acessar o URL de ação
>> GET - os dados enviados fazem parte do URL (endereço) associado à consulta enviada para o servidor; suporta até 128 caracteres. Ex: www.xxx.com.br?nome=teste
>> POST - os dados entrados fazem parte do corpo da mensagem enviada para o servidor; transfere grande quantidade de dados.


EX: <FORM METHOD="POST" action = “pagina.html">

Slide 37

Formulário

Pode conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários

Geralmente utiliza-se <INPUT>, <SELECT> e <TEXTAREA>.

OBS: todos os campos de entrada devem ter um atributo NAME - que será utilizado posteriormente pelo script responsável pelo processamento das informações do formulário

Slide 38

Formulário - <INPUT>

<INPUT>: tem um atributo TYPE, ao qual pode ser atribuído seis valores diferentes para gerar seis tipos diferentes de entrada de dados.

[1].Tipo texto

Sintaxe:
Nome <INPUT TYPE="TEXT" NAME="CampoNome">



[2].Tipo PASSWORD

Sintaxe:
Senha <INPUT TYPE="PASSWORD" NAME="Senha">



ATRIBUTOS ADICIONAIS para campos do tipo texto e password

>> VALUE - usado para dar um valor inicial. Ex: <INPUT TYPE="TEXT" NAME="nome" VALUE="Seu nome">

>> SIZE - especifica o tamanho do espaço no display para o campo. Ex: <INPUT TYPE="TEXT" SIZE=35>

>> MAXLENGTH - número de caracteres aceitos em um campo. Ex: <INPUT TYPE="TEXT" NAME="ex" MAXLENGTH=2>



[3].Tipo CHECKBOX: insere um botão para escolha de opções. A cada alternativa corresponde um valor a ser manipulado pelo script que processa os dados. NAME deve ser diferente para cada ítem

Sintaxe:
<input type="checkbox" name="bike" value="Bike">Eu tenho uma bike
<input type="checkbox" name="carro" value="Carro">Eu tenho um carro



[4].Tipo Radio Button: insere um botão de escolha de valores para uma opção. NAME deve ser o mesmo para todos os ítens

Sintaxe:
<INPUT TYPE="RADIO" NAME="sexo" VALUE="masc“ CHECKED>Masculino
<INPUT TYPE="RADIO" NAME="sexo" VALUE="fem">Feminino



[5].Tipo SUBMIT: realiza o envio dos dados para o script escpecificado no action do FORM

Sintaxe:
Enviar <INPUT TYPE="SUBMIT" NAME="NomeBotao">



[6].Tipo RESET: restaura os valores iniciais das entradas de dados

Sintaxe:
Limpar <INPUT TYPE="RESET" NAME="Nome">

Slide 39

Formulário - Tag Select

<SELECT> apresenta uma lista de valores (menu suspenso) através de campos OPTION.

Sintaxe. Ex:

<SELECT NAME="sabor">
<OPTION VALUE = “abacaxi”>Abacaxi </OPTION>
<OPTION VALUE=“creme” SELECTED >Creme </OPTION>
<OPTION VALUE = “morango”>Morango </OPTION>
<OPTION VALUE = “chocolate”>Chocolate </OPTION>
</SELECT>

Slide 40

Formulário - Tag <TEXTAREA>

Abre uma área para entrada de texto de acordo com atributos para número de colunas/linhas e, se for o caso, um valor inicial.

Sintaxe. Ex:

<TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentário </TEXTAREA>

Para próxima aula

Exercício para a próxima aula

1. Construa um formulário contendo todos os campos apresentados em aula.

Consulte os sites: http://www.w3schools.com/ e http://www.maujor.com



2. Definir a dupla e uma proposta de Projeto - Entregar uma página html listando todas as funcionalidades a serem desenvolvidas.

Na próxima aula

Novas Tags incorporadas na versão 5 do HTML.
Formatando o documento com CSS.


Ver sites:

  • http://www.maujor.com/blog/2006/06/11/menumania-um/
  • http://www.kadunew.com/blog/html5/validacao-de-formulario-com-html5
  • http://www.kadunew.com/blog/web-design/22-web-sites-desenvolvidos-com-html5-e-css3
  • http://www.kadunew.com/blog/html5/10-exemplos-de-aplicacoes-usando-html5
  • http://html5demos.com/
  • http://www.maujor.com/tutorial/interativo-css3/

HTML versus CSS

Diferença entre HTML e CSS

HTML                                                     CSS