UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas Programação para Aplicações WEB Profa. Semíramis Assis 2015.2.

Apresentação em tema: "UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas Programação para Aplicações WEB Profa. Semíramis Assis 2015.2."— Transcrição da apresentação:

1 UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas Programação para Aplicações WEB Profa. Semíramis Assis 2015.2

2 Introdução ao HTML Formulários Objetivo de cadastramento de informações. Possui botões de submissão/reset dos dados ou genérico. Pode utilizar validações através de scripts. Utiliza tags de input de dados Atributos: Name – Identificação do formulário e seus elementos. Action – Ação a ser executada quando os dados forem submetidos. Method – Método de envio dos dados. Get – Exibindo os dados na barra de endereços; Post – Escondendo os dados na barra de endereço. Enctype – Tipo de dados existentes no formulário. Text/plain – Apenas campos texto. Multipart/form-data – Existem arquivos a serem submetidos.

3 Introdução ao HTML Textos: - Campo de texto simples. - Campo de texto com múltiplas linhas. - Campo para entrada de senhas. - Campos com valores escondidos do usuário. Seleção: - Pode selecionar apenas uma opção por vez. Conhecido como Radio Button. - Pode checar mais de uma opção. Conhecido como CheckBox.

4 Introdução ao HTML Exemplo de formulário simples: Exercício! Criar um formulário com dois campos de texto simples, dois botões (um Submit e um Reset). Em seguida, criar um textarea com label ‘Descrição’ e um campo para entrada de senhas.

5 Introdução ao HTML Quais os elementos utilizados para construir o formulário abaixo? Exercício! Reproduzir o formulário abaixo, da mesma forma exibida na figura.

6 Introdução ao HTML Novos inputs inseridos no HTML 5: - Disponibiliza uma paleta de cores para seleção; - Disponibiliza um calendário; - Calendário com hora e fuso horário; - Calendário com hora sem fuso horário; - Entrada de e-mail. Faz validação em caso de e-mails inválidos. - Entrada de mês. - Entrada numérica.

7 Introdução ao HTML Utilização da tag VIDEO inserida com o HTML 5: Atributos: Autoplay Controls Height Width Loop Muted Poster Preload Src Função javascript: Funções: play() pause() load() canPlayType() addTextTrack()

8 Introdução ao HTML Exercício! Testar os novos controles do HTML5 criando um input cor e setando a cor selecionada em um texto de um parágrafo. Criar uma tag vídeo com os botões AUMENTAR e LOOP. Ao clicar no Aumentar, o vídeo deverá aumentar de tamanho e ao clicar em Loop, deverá entrar em repetição contínua ou sair da repetição contínua.

9 Introdução ao HTML Outros novos inputs do HTML 5: Range – Campos numéricos que contém uma faixa de valores; Search – Campo para pesquisa; Tel – Entrada de números de telefones; Time – Entrada de tempo (sem fuso horário); Url – Endereço url; Week – Seleciona semana e ano;

10 Introdução ao HTML Exercício! Criar um formulário que utilize os campos de e-mail, url e dois campos texto (nome e descrição). Colocar dois botões (reset e submit).

11 Introdução ao HTML Combo - Apresenta uma lista, em forma de ComboBox, de todas as opções informadas. Pode ser de seleção simples ou múltipla. Botões - Botões que podem realizar ações determinadas pelo desenvolvedor ( funções javascript). - Botão para submissão dos dados. Ao clicar, a página informada no atributo action do formulário será invocada e os dados enviados. - Botão para resetar (limpar) o formulário. Arquivos - Define que um arquivo poderá ser selecionado.

12 Introdução ao HTML Tags para campos de texto: Maxlength – Limita o tamanho máximo de caracteres. Width – Determina o comprimento do campo. Disabled – Determina se o campo será exibido desabilitado ou não. Readonly – Informa se o campo será somente leitura. Size – Determina o tamanho do campo em caracteres. Style – Determina a estilização do campo (css a ser utilizado). Value – Informa o valor padrão do campo, que será carregado com ele ou exibido por ele. Name – Nome de identificação do campo. ID – Identificador do campo, pode ter o mesmo valor do nome, não obrigatório.

13 Introdução ao HTML Algumas novas API’s introduzidas com o HTML 5: Geolocalização – Retorna latitude/longitude informados pelo browser; Drag/drop – Capacidade de arrastar objetos de um lado a outro da tela.

14 Introdução ao HTML Exemplo simples de geolocalização:

15 Introdução ao HTML Exibindo localização no mapa: Tratando erros:

16 Introdução ao HTML Propriedades do objeto Position:

17 Introdução ao HTML Exercício! Fazer uma função que retorne a altitude das coordenadas, após clicar em um botão, exibindo na tela.

18 Introdução ao HTML Exercício! Criar um formulário que contenha um campo para submissão de arquivos. Qual o tipo do formulário para este caso?

19 Introdução ao HTML É possível enviar dados de formulários diretamente para um email! Como? Definindo a Action como um tipo Mailto!

20 Introdução ao HTML Fieldsets Agrupam informações (campos) em regiões delimitadas por linhas. Atributos: Name – Nome para o fieldset. Form – Formulários aos quais o fieldset pertence. Disabled – Indica que o grupo de elementos pertencentes ao fieldset será exibido com o estilo desabilitado.

21 Introdução ao CSS Folha de estilos que permite definir características como: largura, comprimento, cor, plano de fundo, figuras de fundo, margens e outras variáveis visuais em campos, labels, tabelas, botões de uma página HTML. Nem todas as propriedades são suportadas por todos os navegadores.

22 Introdução ao CSS Aplica-se um estilo a um campo através do atributo Class da linha, coluna ou elemento. Exemplo: Ou

23 Introdução ao CSS Exemplo de um arquivo básico css: Atenção nas separações por ‘;’ das linhas!

24 Introdução ao CSS Resultado da folha de estilo apresentada:

25 Introdução ao CSS Alguns atributos: Formatação de texto: Font – Define todas as propriedades da fonte em uma única linha. Font-family – Define a família de fonte a ser utilizada. Fontes são aplicadas de acordo com precedência de inserção e presença da fonte no computador do usuário. Font-size – Define tamanho da fonte. Font-weight – Define quão fina ou larga a fonte irá aparecer (negrito). Font-style – Define o estilo da fonte (itálico,normal ou oblíquo). Visibility – Define se o conteúdo será visível, collapse, escondido ou herdado do elemento pai.

26 Introdução ao CSS Exercício! Modificar a tag do html para apresentar textos com cor de fundo amarela (yellow) e em negrito (bold). Modificar a cor de fundo da página para laranja (orange). Criar um item de nome ‘label’ e aplicar em uma linha de uma tabela.

27 Introdução ao CSS Tabelas: Border-style – Define o estilo da borda (dotted,solid, double, groove,inset,outset,dashed). Alguns efeitos dependem da cor da borda (inset e outset). Border-width – Largura da borda. Border-color – Cor da borda. Border-top-style – Estilo da borda superior. Border-right-style – Estilo da borda direita. Border-bottom-style – Estilo da borda inferior. Border-left-style - Estilo da borda esquerda.

28 Introdução ao CSS Exemplo de definição de todas bordas em tabela (figura de cima) e, logo abaixo, código utilizado:

29 Introdução ao CSS Exercício! Fazer uma tabela com bordas estilizadas, seguindo o exemplo:

30 Introdução ao CSS Bibliografia: http://www.w3schools.com/css SILVA, M.S. Criando sites com HTML: sites de alta qualidade com html e css. Novatec. http://msdn.microsoft.com/pt- br/library/dn144998.aspx - Geolocalização (Microsoft). http://msdn.microsoft.com/pt- br/library/dn144998.aspx